:root {
    --ink:#253e39;
    --muted:#69786f;
    --paper:#faf9f3;
    --green:#426b52;
    --lime:#dcef99;
    --line:#e2e5d9
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:25px
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'DM Sans',sans-serif;
    font-size:16px;
    line-height:1.65
}
a {
    color:inherit;
    text-decoration:none
}
button {
    font:inherit;
    cursor:pointer
}
h1,h2,h3,p {
    margin:0
}
h1,h2,h3 {
    font-family:Manrope,sans-serif;
    line-height:1.12;
    letter-spacing:-.05em
}
h1 {
    font-size:clamp(42px,4.9vw,68px);
    font-weight:800
}
h2 {
    font-size:clamp(34px,3.6vw,48px);
    font-weight:800
}
h3 {
    font-size:24px;
    letter-spacing:-.035em
}
em {
    font-style:normal;
    color:#79945d
}
p {
    color:var(--muted)
}
.wrap {
    width:min(1180px,calc(100% - 80px));
    margin:auto
}
.nav {
    height:104px;
    display:flex;
    align-items:center;
    justify-content:space-between
}
.logo {
    font-size:33px;
    font-weight:800;
    letter-spacing:-2px;
    line-height:1
}
.logo span {
    color:#8b9c65;
    font-size:22px;
    vertical-align:top;
    margin-left:3px
}
.nav nav {
    display:flex;
    align-items:center;
    gap:34px;
    font-size:14px;
    font-weight:600
}
.button {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:26px;
    padding:17px 24px;
    background:var(--green);
    color:white;
    border:0;
    border-radius:9px;
    font-weight:700;
    font-size:14px;
    box-shadow:0 4px 0 #294d38;
    transition:transform .2s,background .2s
}
.button:hover {
    background:#30563f;
    transform:translateY(-2px)
}
.button.small {
    padding:12px 18px;
    box-shadow:none
}
.button span {
    font-size:20px;
    line-height:1
}
.hero {
    display:grid;
    grid-template-columns:1.02fr 1fr;
    align-items:center;
    padding:58px 0 75px;
    gap:25px
}
.eyebrow {
    font-size:10px;
    letter-spacing:2px;
    font-weight:800;
    color:var(--green);
    margin-bottom:24px
}
.dot {
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#81a46b;
    margin-right:8px
}
.intro {
    font-size:17px;
    max-width:470px;
    margin:26px 0 29px
}
.actions {
    display:flex;
    align-items:center;
    gap:23px
}
.text-link {
    font-size:13px;
    font-weight:700
}
.freedom {
    font-size:11px;
    margin-top:25px
}
.world {
    position:relative;
    background:radial-gradient(ellipse,#e6ead5 0%,#edf0e1 38%,transparent 69%);
    min-width:0
}
.world svg {
    display:block;
    width:110%;
    margin-left:-5%
}
.world-label {
    position:absolute;
    top:17px;
    left:30%;
    font-size:12px;
    transform:rotate(-5deg);
    background:#e8edce;
    border-radius:6px;
    padding:6px 12px
}
.floating {
    position:absolute;
    background:#fffdf7;
    border:1px solid #e5e6d8;
    padding:13px 16px;
    border-radius:11px;
    box-shadow:0 12px 32px #2b493215;
    display:flex;
    gap:12px;
    align-items:center;
    transform:rotate(-4deg)
}
.floating>span {
    display:grid;
    place-items:center;
    width:35px;
    height:35px;
    background:#ede7f5;
    border-radius:9px;
    font-size:22px;
    color:#8c76b1
}
.floating b {
    display:block;
    font-size:12px
}
.floating small {
    display:block;
    font-size:10px;
    color:var(--muted)
}
.tag-one {
    left:0;
    top:27%
}
.tag-two {
    right:0;
    bottom:9%;
    transform:rotate(4deg)
}
.tag-two>span {
    background:#f6e8d4;
    color:#cc9b62
}
.art-note {
    position:absolute;
    bottom:-14px;
    left:35%;
    font-size:9px;
    color:#859080
}
.ribbon {
    border-block:1px solid #dce2ce;
    background:#eff2e3;
    display:flex;
    align-items:center;
    justify-content:space-evenly;
    gap:22px;
    padding:18px 30px;
    font-size:10px;
    letter-spacing:1.8px;
    font-weight:700
}
.ribbon i {
    font-style:normal;
    font-size:18px;
    color:#92a36e
}
.section {
    padding-block:90px
}
.section-heading {
    max-width:650px;
    text-align:center;
    margin:auto auto 43px
}
.section-heading>p:last-child {
    max-width:515px;
    margin:22px auto 0
}
.perks {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px
}
.feature {
    padding:35px;
    border-radius:18px;
    background:#eef0e4;
    border:1px solid #e4e7da
}
.feature h3 {
    font-size:29px;
    margin-bottom:17px
}
.feature .eyebrow {
    margin-bottom:14px
}
.feature>p:not(.eyebrow) {
    max-width:450px
}
.item-stage {
    height:210px;
    position:relative;
    display:grid;
    place-items:center;
    background:radial-gradient(ellipse,#dce5c4,transparent 66%);
    margin-bottom:25px
}
.pixel-crown {
    font-size:120px;
    line-height:1;
    color:#e2b763;
    text-shadow:4px 0 #886b3a,0 5px #886b3a,8px 8px #cbd7b2;
    transform:rotate(-10deg)
}
.spark {
    position:absolute;
    color:#849b60;
    font-size:26px
}
.s1 {
    left:25%;
    top:25%
}
.s2 {
    right:24%;
    top:48%
}
.item-pill {
    position:absolute;
    bottom:0;
    border:1px solid #cdd6b9;
    border-radius:20px;
    background:#f8faef;
    padding:5px 14px;
    font-size:8px;
    letter-spacing:2px;
    font-weight:700
}
.subtle {
    font-size:11px;
    color:#7c8676;
    display:block;
    margin-top:20px
}
.gift {
    background:#f2ece5
}
.gift-icon {
    font-size:61px;
    margin:9px 0 40px;
    line-height:1.7
}
.inscription {
    background:#fffaf3;
    border:1px dashed #d4c7b6;
    border-radius:10px;
    padding:20px;
    margin-top:26px
}
.inscription span,.inscription small {
    display:block;
    font-size:10px;
    color:#95866e
}
.inscription span {
    letter-spacing:1.5px;
    font-weight:700
}
.inscription b {
    display:block;
    font-size:16px;
    margin:8px 0
}
.progress-section {
    background:#e9eddd;
    padding:75px 0
}
.progress-layout {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    align-items:center
}
.progress-layout h2 {
    margin-bottom:24px
}
.progress-layout p+p {
    margin-top:17px
}
.reward-path {
    position:relative;
    display:grid;
    gap:20px
}
.reward-path:before {
    content:'';
    position:absolute;
    left:29px;
    top:40px;
    bottom:40px;
    border-left:2px dashed #b9c8a7
}
.reward-path article {
    position:relative;
    display:flex;
    gap:24px;
    align-items:center
}
.reward-path article>span {
    background:#f6f8ed;
    border:1px solid #ced8bd;
    border-radius:13px;
    min-width:60px;
    height:60px;
    display:grid;
    place-items:center;
    font-size:28px;
    color:#7c925a
}
.reward-path small {
    font-size:8px;
    letter-spacing:1.8px;
    color:#71845e;
    font-weight:700
}
.reward-path h3 {
    font-size:21px;
    margin:6px 0
}
.reward-path p {
    font-size:13px
}
.hub-layout {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:center
}
.hub-layout h2 {
    margin-bottom:24px
}
.dashboard {
    padding:25px;
    background:white;
    border:1px solid #dce3d3;
    border-radius:16px;
    box-shadow:0 16px 0 -7px #e1e7d6,0 30px 50px #3652370b;
    transform:rotate(-2deg)
}
.dash-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-bottom:18px;
    border-bottom:1px solid var(--line);
    font-size:14px
}
.dash-top>span {
    font-size:7px;
    letter-spacing:1px;
    background:#f0f2e9;
    border-radius:4px;
    padding:5px 7px;
    color:#718069
}
.dash-greeting {
    display:flex;
    gap:13px;
    align-items:center;
    margin:25px 0
}
.avatar {
    background:#e7dcef;
    border-radius:9px;
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    color:#8f73aa;
    font-size:31px
}
.dash-greeting small,.milestone>small {
    font-size:7px;
    font-weight:700;
    letter-spacing:1px;
    color:#849079
}
.dash-greeting h3 {
    font-size:21px;
    margin-top:5px
}
.dash-stats {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}
.dash-stats>div {
    padding:17px;
    background:#f2f5eb;
    border-radius:8px
}
.dash-stats small {
    display:block;
    font-size:10px;
    color:#6d7e64
}
.dash-stats b {
    display:block;
    font-size:27px
}
.dash-stats b span {
    font-size:14px;
    color:#9bae78
}
.milestone {
    padding:20px;
    background:#faf8f2;
    border:1px solid #eeeadb;
    border-radius:10px;
    margin-top:16px
}
.milestone>b {
    display:flex;
    justify-content:space-between;
    font-size:12px;
    margin:8px 0 15px
}
.milestone b span {
    color:#cfab64;
    font-size:22px
}
.bar {
    height:8px;
    background:#e5e7db;
    border-radius:9px
}
.bar span {
    display:block;
    width:58%;
    height:100%;
    background:#9caf78;
    border-radius:9px
}
.milestone p {
    font-size:10px;
    margin-top:12px
}
.dash-bottom {
    display:flex;
    justify-content:space-between;
    margin-top:22px;
    font-size:10px;
    color:#68825b
}
.mini-benefit {
    display:flex;
    gap:15px;
    margin-top:24px
}
.mini-benefit>span {
    width:36px;
    height:36px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:#edf0e3;
    color:#7c925e;
    font-size:22px
}
.mini-benefit h3 {
    font-size:17px;
    margin-bottom:8px;
    letter-spacing:-.025em
}
.mini-benefit p {
    font-size:13px
}
.inner-circle {
    padding:48px;
    background:#2d4b40;
    border-radius:18px;
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:55px;
    color:#fff
}
.inner-circle .eyebrow {
    color:#c7d69d
}
.inner-circle h2 {
    font-size:36px
}
.inner-circle em {
    color:#d5e49c
}
.circle-perks {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px
}
.circle-perks article>span {
    color:#d8e2ac;
    font-size:30px
}
.circle-perks h3 {
    font-size:18px;
    line-height:1.3;
    margin:14px 0
}
.circle-perks p {
    font-size:12px;
    color:#c2cdc1
}
.apply-layout {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:center
}
.apply-layout h2 {
    margin-bottom:25px
}
.check {
    font-size:13px;
    margin-top:17px;
    color:#5b7754
}
.application {
    padding:32px;
    background:#fffdf7;
    border:1px solid #e0e3d6;
    border-radius:15px
}
.application .eyebrow {
    font-size:8px;
    letter-spacing:1.2px;
    margin-bottom:15px
}
.application h3 {
    font-size:25px
}
.application ol {
    list-style:none;
    counter-reset:steps;
    padding:0;
    margin:27px 0
}
.application li {
    counter-increment:steps;
    padding-left:39px;
    position:relative;
    margin:22px 0
}
.application li:before {
    content:counter(steps);
    position:absolute;
    left:0;
    top:0;
    background:#edf0df;
    color:#728553;
    border-radius:50%;
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    font-size:11px;
    font-weight:700
}
.application li b {
    font-size:13px
}
.application li p {
    font-size:12px;
    margin-top:6px
}
.application .button {
    width:100%
}
.application>.subtle {
    text-align:center
}
.faq {
    max-width:850px;
    padding-bottom:80px
}
.faq h2 {
    font-size:28px;
    margin-bottom:25px;
    letter-spacing:-.04em
}
.faq details {
    border-bottom:1px solid var(--line);
    padding:19px 0
}
.faq summary {
    cursor:pointer;
    font-weight:600;
    font-size:14px;
    list-style:none;
    display:flex;
    justify-content:space-between;
    gap:20px
}
.faq summary:after {
    content:'+';
    color:#849768;
    font-size:20px
}
.faq details[open] summary:after {
    content:'−'
}
.faq details p {
    font-size:13px;
    margin-top:15px;
    max-width:720px
}
.closing {
    text-align:center;
    background:#eef1e2;
    border-block:1px solid #e0e5d4;
    padding:65px 24px
}
.closing h2 {
    margin-bottom:30px
}
.closing .eyebrow {
    margin-bottom:20px
}
footer {
    padding-block:30px;
    display:flex;
    align-items:center;
    justify-content:space-between
}
footer .logo {
    font-size:26px
}
footer p,footer>a:last-child {
    font-size:11px
}
dialog {
    border:1px solid #d5dfc9;
    border-radius:18px;
    max-width:530px;
    width:calc(100% - 36px);
    padding:40px;
    color:var(--ink);
    background:var(--paper);
    box-shadow:0 25px 90px #162c3430
}
dialog::backdrop {
    background:#253e3977;
    backdrop-filter:blur(4px)
}
dialog h2 {
    font-size:32px;
    margin-bottom:20px
}
dialog p {
    font-size:14px;
    margin-bottom:18px
}
dialog .eyebrow {
    font-size:10px
}
dialog .close {
    position:absolute;
    right:15px;
    top:10px;
    background:none;
    border:0;
    font-size:27px;
    color:var(--ink)
}
:focus-visible {
    outline:3px solid #ad8bc7;
    outline-offset:5px
}
.skip {
    position:absolute;
    left:20px;
    top:-80px;
    background:white;
    z-index:10;
    padding:10px
}
.skip:focus {
    top:10px
}
@media(min-width:1400px) {
    .hero {
        padding-top:85px;
        padding-bottom:100px
    }
}
@media(max-width:1000px) {
    .wrap {
        width:calc(100% - 48px)
    }
    .hero {
        gap:0
    }
    h1 {
        font-size:48px
    }
    .actions {
        gap:16px;
        flex-wrap:wrap
    }
    .hero .button {
        padding:15px 17px;
        font-size:12px
    }
    .floating {
        padding:9px
    }
    .floating small {
        font-size:8px
    }
    .floating b {
        font-size:10px
    }
    .world-label {
        font-size:10px
    }
    .progress-layout,.hub-layout,.apply-layout {
        gap:40px
    }
    .inner-circle {
        gap:28px;
        padding:35px
    }
    .circle-perks {
        gap:20px
    }
    .inner-circle h2 {
        font-size:30px
    }
    .ribbon {
        font-size:8px;
        letter-spacing:1px
    }
    .feature {
        padding:27px
    }
}
@media(max-width:700px) {
    .wrap {
        width:calc(100% - 36px)
    }
    .nav {
        height:80px
    }
    .logo {
        font-size:29px
    }
    .nav nav {
        gap:0
    }
    .nav nav>a:not(.button) {
        display:none
    }
    .button.small {
        font-size:11px;
        padding:10px 12px;
        gap:13px
    }
    .hero {
        grid-template-columns:1fr;
        padding:35px 0 42px
    }
    .hero-copy {
        text-align:center
    }
    .eyebrow {
        font-size:8px;
        letter-spacing:1.6px;
        margin-bottom:20px
    }
    h1 {
        font-size:clamp(38px,9.7vw,58px)
    }
    .intro {
        font-size:15px;
        max-width:420px;
        margin:23px auto
    }
    .actions {
        justify-content:center;
        gap:18px
    }
    .hero .button {
        font-size:13px;
        padding:16px 19px
    }
    .freedom {
        font-size:10px;
        margin-top:22px
    }
    .world {
        margin-top:32px;
        max-width:480px;
        justify-self:center;
        width:100%
    }
    .world svg {
        width:100%;
        margin:0
    }
    .world-label {
        top:0;
        left:28%
    }
    .tag-one {
        top:26%;
        left:0
    }
    .tag-two {
        bottom:8%;
        right:0
    }
    .art-note {
        bottom:-5px;
        left:30%
    }
    .ribbon {
        overflow:hidden;
        white-space:nowrap;
        justify-content:center;
        padding:16px 15px
    }
    .ribbon>span:nth-of-type(3),.ribbon>i:last-child {
        display:none
    }
    .section {
        padding-block:60px
    }
    .section-heading {
        margin-bottom:30px
    }
    .section-heading>p:last-child {
        font-size:14px
    }
    .perks,.progress-layout,.hub-layout,.apply-layout,.inner-circle {
        grid-template-columns:1fr;
        gap:25px
    }
    .feature {
        padding:28px
    }
    .feature h3 {
        font-size:27px
    }
    .feature>p:not(.eyebrow) {
        font-size:14px
    }
    .item-stage {
        height:180px
    }
    .gift-icon {
        margin:0 0 25px;
        font-size:51px
    }
    .progress-section {
        padding:50px 0
    }
    .progress-layout>div>p {
        font-size:14px
    }
    .progress-layout .subtle {
        font-size:10px
    }
    .reward-path {
        margin-top:10px
    }
    .hub-layout {
        gap:43px
    }
    .dashboard {
        margin:6px;
        order:2
    }
    .hub-layout>div:last-child>p {
        font-size:14px
    }
    .inner-circle {
        padding:29px;
        gap:30px
    }
    .inner-circle h2 {
        font-size:32px
    }
    .circle-perks {
        gap:24px
    }
    .circle-perks h3 {
        font-size:16px
    }
    .circle-perks p {
        font-size:12px
    }
    .apply-layout {
        gap:32px
    }
    .apply-layout>div>p {
        font-size:14px
    }
    .application {
        padding:25px
    }
    .faq {
        padding-bottom:50px
    }
    .faq h2 {
        font-size:25px
    }
    .closing {
        padding:50px 18px
    }
    .closing h2 {
        font-size:34px
    }
    footer {
        gap:20px;
        flex-wrap:wrap
    }
    footer p {
        order:3;
        width:100%;
        font-size:10px
    }
    footer>a:last-child {
        margin-left:auto
    }
    dialog {
        padding:30px
    }
    .application .eyebrow {
        font-size:8px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    .button {
        transition:none
    }
}
/* Pixadom brand direction: saturated colors, smooth cartoon art, cloud shapes. */
:root {
    --ink:#223744;
    --muted:#4b6170;
    --paper:#fffdf6;
    --green:#007e68;
    --lime:#ffdc54;
    --line:#d8e8ed
}
body {
    font-family:Nunito,'DM Sans',sans-serif;
    background:#fffdf6
}
h1,h2,h3 {
    font-family:'Baloo 2',Manrope,sans-serif;
    letter-spacing:-.025em;
    font-weight:800
}
h1 {
    line-height:1.02;
    font-size:clamp(42px,4.8vw,67px)
}
h2 {
    line-height:1.08
}
h3 {
    line-height:1.15
}
em {
    color:#00a8d2
}
.eyebrow {
    color:#087d9d;
    font-size:11px;
    letter-spacing:1.7px
}
.dot {
    background:#ffda49
}
.nav {
    width:100%;
    padding-inline:max(40px,calc((100% - 1180px)/2));
    height:88px;
    background:#28b8ef;
    border-bottom:3px solid white;
    box-shadow:0 3px 0 #1b74962a
}
.nav nav {
    color:#fff;
    font-weight:900;
    text-transform:uppercase
}
.logo {
    display:inline-flex;
    letter-spacing:-3px;
    font-family:'Baloo 2',sans-serif;
    font-size:36px;
    font-weight:800;
    filter:drop-shadow(0 2px 0 #13799c)
}
.logo .brand-letter {
    margin:0;
    font-size:inherit;
    vertical-align:baseline;
    color:#2cc5f2;
    -webkit-text-stroke:1px white;
    paint-order:stroke fill;
    text-shadow:2px 0 white,-2px 0 white,0 2px white,0 -2px white;
    line-height:1
}
.brand-letter:nth-child(2) {
    color:#ffb540
}
.brand-letter:nth-child(3) {
    color:#ff484e
}
.brand-letter:nth-child(4) {
    color:#f05bc4
}
.brand-letter:nth-child(5) {
    color:#8974da
}
.brand-letter:nth-child(6) {
    color:#4eaff5
}
.brand-letter:nth-child(7) {
    color:#58c655
}
.button {
    background:#00ce8c;
    border:2px solid #007e63;
    box-shadow:0 5px 0 #007058,inset 0 3px 0 #ffffff59;
    border-radius:13px;
    color:white;
    text-shadow:0 1px 1px #006b4c;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.2px
}
.button:hover {
    background:#00bb82
}
.button.small {
    border:2px solid white;
    box-shadow:0 3px 0 #128dac;
    padding:12px 17px
}
.hero {
    position:relative;
    padding-block:58px 74px;
    gap:40px
}
.hero:before {
    content:'';
    position:absolute;
    z-index:-1;
    inset:0 calc((1180px - 100vw)/2);
    background:linear-gradient(180deg,#95e9f2,#d5f7f8);
    border-bottom:5px solid white;
    border-radius:0 0 45% 7%/0 0 5% 3%
}
.hero-copy .eyebrow {
    display:inline-block;
    background:white;
    border:2px solid #37b9d9;
    border-radius:30px;
    padding:7px 13px;
    font-size:9px;
    margin-bottom:24px
}
.hero-copy h1 {
    color:white;
    text-shadow:0 3px 0 #148bb3,2px 0 0 #148bb3,-2px 0 0 #148bb3,0 -2px 0 #148bb3;
    letter-spacing:-1px
}
.hero h1 em {
    color:#ffe059;
    text-shadow:0 3px 0 #a97927,2px 0 0 #a97927,-2px 0 0 #a97927,0 -2px 0 #a97927
}
.intro {
    color:#245565;
    font-weight:700
}
.text-link {
    color:#176079;
    font-weight:900
}
.freedom {
    color:#356474;
    font-weight:800
}
.world {
    background:none;
    isolation:isolate
}
.hero-art {
    display:block;
    width:100%;
    aspect-ratio:1.15;
    object-fit:cover;
    border:5px solid white;
    border-radius:42% 42% 32% 32%/28% 26% 32% 29%;
    filter:drop-shadow(0 9px 0 #2889a82b)
}
.world-label {
    top:-15px;
    left:20%;
    background:#fff;
    border:2px solid #24abd0;
    color:#078cae;
    font-weight:900;
    box-shadow:0 4px 0 #2592ad26;
    z-index:2
}
.floating {
    border:2px solid #2c6572;
    box-shadow:0 5px 0 #1d607d30;
    border-radius:13px;
    background:#fff;
    padding:12px
}
.floating>span {
    background:#fdd8ed;
    color:#f3469c;
    border:1px solid #f6aacd
}
.floating b {
    font-weight:900
}
.tag-one {
    left:-24px;
    top:28%
}
.tag-two {
    right:-12px;
    bottom:6%
}
.tag-two>span {
    background:#fff0a9;
    color:#e4a124
}
.art-note {
    bottom:-27px;
    left:27%;
    font-weight:700;
    color:#438493
}
.ribbon {
    background:#ffda52;
    border-block:3px solid white;
    color:#765324;
    font-weight:900;
    padding-block:20px
}
.ribbon i {
    color:#ec971e
}
.section-heading h2 {
    color:#087ca3
}
.section-heading em {
    color:#f14b98
}
.section-heading .eyebrow {
    margin-bottom:17px
}
.feature {
    background:#def8ff;
    border:3px solid #208bab;
    border-radius:22px;
    box-shadow:0 6px 0 #acdce8
}
.feature h3 {
    color:#087fa6
}
.gift {
    background:#fff0f7;
    border-color:#b8568f;
    box-shadow:0 6px 0 #efd0e1
}
.gift h3 {
    color:#be377a
}
.item-stage {
    background:none;
    height:250px;
    margin:0 0 20px
}
.rewards-art {
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:16px
}
.pixel-crown,.spark {
    display:none
}
.item-pill {
    background:#ffdd53;
    border:2px solid #a27a30;
    color:#765115;
    font-weight:900;
    bottom:0
}
.gift-scene {
    height:215px;
    overflow:hidden;
    border-radius:16px;
    margin-bottom:35px;
    background:#fff4f9
}
.gift-scene img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center
}
.inscription {
    background:white;
    border:2px dashed #e8a4c5
}
.inscription span {
    color:#ba4f89
}
.inscription b {
    color:#79405e
}
.progress-section {
    background:#ffdc55;
    border-block:4px solid white
}
.progress-section h2 {
    color:#60442a
}
.progress-section em {
    color:#cb6a22
}
.progress-section p {
    color:#775f37
}
.progress-section .eyebrow {
    color:#97621b
}
.reward-path:before {
    border-color:#d3982d
}
.reward-path article>span {
    background:white;
    border:2px solid #c69736;
    box-shadow:0 4px 0 #e3b33d;
    color:#f4ac2b
}
.reward-path small {
    color:#926622
}
.reward-path h3 {
    color:#6f4e24
}
.dashboard {
    border:3px solid #258dab;
    box-shadow:0 8px 0 #aeddea,0 22px 45px #1c668822;
    border-radius:20px
}
.dash-top {
    color:#1282a5;
    border-color:#cfedf3
}
.dash-top>span {
    background:#def7ff;
    color:#2b7995
}
.avatar {
    background:#f9d7ec;
    color:#da559d;
    border:2px solid #de86b5
}
.dash-stats>div {
    background:#e6f9ff;
    border:1px solid #b5e7f3
}
.dash-stats b span {
    color:#0fb5d3
}
.milestone {
    background:#fff4c6;
    border:2px solid #eed27a
}
.milestone>b {
    color:#856229
}
.bar {
    background:#ecdca1
}
.bar span {
    background:#00c78b
}
.dash-bottom {
    color:#0a8dae;
    font-weight:800
}
.hub-layout h2 {
    color:#137ca2
}
.hub-layout em {
    color:#f14c98
}
.mini-benefit>span {
    background:#dcf8ff;
    border:1px solid #9cdeed;
    color:#04a3cd
}
.inner-circle {
    background:linear-gradient(130deg,#ba54c7,#e166a0 50%,#ffaf36);
    border:4px solid white;
    box-shadow:0 7px 0 #eedcba;
    position:relative;
    overflow:hidden;
    border-radius:28px
}
.inner-circle h2 {
    font-size:39px;
    color:white;
    text-shadow:0 2px 0 #9b397750
}
.inner-circle em {
    color:#ffec97
}
.inner-circle .eyebrow {
    color:#fff1aa
}
.circle-perks p {
    color:white
}
.circle-perks article>span {
    color:#ffef99;
    font-size:36px
}
.circle-perks h3 {
    font-size:22px
}
.apply-layout h2 {
    color:#148eb8
}
.apply-layout em {
    color:#ed4f95
}
.check {
    color:#078663;
    font-weight:800
}
.application {
    background:#fff;
    border:3px solid #2a86a4;
    border-radius:22px;
    box-shadow:0 6px 0 #c2e6ed
}
.application h3 {
    color:#1685aa
}
.application li:before {
    background:#ffdd54;
    color:#95631f;
    border:1px solid #e3bc38
}
.faq h2 {
    color:#1188b0
}
.faq summary {
    font-weight:900;
    color:#345c70
}
.faq summary:after {
    color:#04a2ce
}
.closing {
    background:#8be8f3;
    position:relative;
    border-top:5px solid white;
    border-bottom:5px solid white
}
.closing h2 {
    color:white;
    text-shadow:0 3px 0 #2c9fba
}
.closing em {
    color:#ffe46d
}
.closing .eyebrow {
    color:#157e9c
}
footer {
    width:100%!important;
    padding-inline:max(30px,calc((100% - 1180px)/2));
    background:#1e2731;
    color:#ffda54
}
footer p {
    color:#b0c4d2
}
footer .logo {
    font-size:30px
}
dialog {
    border:3px solid #20a0c3
}
dialog h2 {
    color:#048eb4
}
.hero-art {
    aspect-ratio:1.78;
    object-fit:contain;
    border-radius:38px
}
.world {
    padding-block:30px
}
.world-label {
    top:9px
}
.tag-one {
    top:22%;
    left:-20px
}
.tag-two {
    bottom:3%
}
.art-note {
    bottom:-16px
}
.gift-scene img {
    object-fit:contain
}
.gift-scene {
    background:#e8fbff
}
.hero:before {
    inset:0 calc((min(1180px,100vw - 80px) - 100vw)/2)
}
.hero-art {
    aspect-ratio:1
}
@media(max-width:1259px) {
    .hero:before {
        inset:0 -24px
    }
    .nav {
        padding-inline:24px
    }
}
@media(max-width:1000px) {
    .hero {
        gap:28px
    }
    h1 {
        font-size:46px
    }
    .tag-one {
        left:-12px
    }
    .tag-two {
        right:-5px
    }
    .item-stage {
        height:220px
    }
    .gift-scene {
        height:185px
    }
    .inner-circle h2 {
        font-size:32px
    }
}
@media(max-width:700px) {
    .nav {
        padding-inline:18px;
        height:78px
    }
    .nav .logo {
        font-size:29px
    }
    .hero {
        padding-top:34px;
        padding-bottom:57px;
        gap:0
    }
    .hero:before {
        inset:0 -18px;
        border-radius:0 0 45% 12%/0 0 2% 1%
    }
    h1 {
        font-size:clamp(38px,10.1vw,58px)
    }
    .hero-copy .eyebrow {
        font-size:8px;
        padding:6px 10px;
        letter-spacing:1px
    }
    .hero-art {
        aspect-ratio:1.25
    }
    .world {
        margin-top:42px;
        width:92%
    }
    .world-label {
        left:20%;
        top:-16px
    }
    .floating {
        padding:8px
    }
    .tag-one {
        left:-16px;
        top:29%
    }
    .tag-two {
        right:-15px;
        bottom:6%
    }
    .art-note {
        font-size:8px;
        left:25%;
        bottom:-24px
    }
    .item-stage {
        height:220px
    }
    .gift-scene {
        height:205px;
        margin-bottom:27px
    }
    .feature {
        padding:24px
    }
    .inner-circle {
        padding:27px
    }
    .inner-circle h2 {
        font-size:32px
    }
    .circle-perks {
        grid-template-columns:1fr;
        gap:24px
    }
    .circle-perks article {
        display:grid;
        grid-template-columns:38px 1fr;
        gap:0 14px
    }
    .circle-perks article>span {
        grid-row:1/3
    }
    .circle-perks h3 {
        margin:4px 0 9px;
        font-size:21px
    }
    .circle-perks p {
        grid-column:2
    }
    .application {
        padding:23px
    }
    .closing h2 {
        font-size:36px
    }
    footer {
        padding-inline:22px
    }
    .hero .button {
        font-size:12px
    }
    .ribbon {
        font-size:7px;
        gap:13px
    }
}
@media(max-width:700px) {
    .hero-art {
        aspect-ratio:1
    }
}
.perk-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px
}
.perk-tile {
    padding:32px;
    display:flex;
    flex-direction:column
}
.perk-image-placeholder,.perk-hero-image {
    width:100%;
    aspect-ratio:16/9;
    background:#111;
    border-radius:15px;
    margin-bottom:26px
}
.perk-hero-image {
    display:block;
    object-fit:contain;
    background:#82c4f7
}
.perk-codes .perk-hero-image {
    background:#fff0f7
}
.perk-gems .perk-hero-image {
    background:#fff6d6
}
.perk-leaderboard .perk-hero-image {
    background:#f0eaff
}
.perk-title-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:14px
}
.perk-tile .perk-title-row .eyebrow {
    margin:0;
    font-size:9px
}
.perk-tier {
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.8px;
    color:#896113;
    background:#ffe396;
    border:1px solid #dbb64f;
    border-radius:20px;
    padding:4px 10px
}
.perk-title-row {
    position:relative
}
.perk-tier {
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%)
}
.perk-gems .perk-title-row {
    padding-right:135px
}
.perk-tile h3 {
    font-size:29px;
    margin-bottom:17px
}
.perk-description {
    font-size:15px;
    line-height:1.75
}
.perk-description strong {
    font-weight:900;
    color:#345667
}
.perk-benefit {
    margin-top:23px;
    padding-top:20px;
    border-top:1px solid #208bab40
}
.perk-benefit h4 {
    font-family:'Baloo 2',Manrope,sans-serif;
    font-size:23px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:-.02em;
    margin:0 0 10px;
    color:#087fa6
}
.perk-benefit p {
    font-size:15px;
    line-height:1.75
}
.perk-codes .perk-benefit {
    border-color:#b8568f40
}
.perk-codes .perk-benefit h4 {
    color:#be377a
}
.perk-gems .perk-benefit {
    border-color:#c6993640
}
.perk-gems .perk-benefit h4 {
    color:#9a6a13
}
.perk-leaderboard .perk-benefit {
    border-color:#8961bc40
}
.perk-leaderboard .perk-benefit h4 {
    color:#7c4bb3
}
@media(max-width:700px) {
    .perk-benefit p {
        font-size:14px
    }
    .perk-benefit h4 {
        font-size:22px
    }
}
.perk-codes {
    background:#fff0f7;
    border-color:#b8568f;
    box-shadow:0 6px 0 #efd0e1
}
.perk-codes h3 {
    color:#be377a
}
.perk-codes .perk-description strong {
    color:#884263
}
.perk-gems {
    background:#fff6d6;
    border-color:#c69936;
    box-shadow:0 6px 0 #ecd8a2
}
.perk-gems h3 {
    color:#9a6a13
}
.perk-gems .perk-description strong {
    color:#85662e
}
.perk-leaderboard {
    background:#f0eaff;
    border-color:#8961bc;
    box-shadow:0 6px 0 #d8c9ec
}
.perk-leaderboard h3 {
    color:#7c4bb3
}
.perk-leaderboard .perk-description strong {
    color:#705286
}
@media(max-width:700px) {
    .perk-grid {
        grid-template-columns:1fr;
        gap:24px
    }
    .perk-tile {
        padding:24px
    }
    .perk-tile h3 {
        font-size:27px
    }
    .perk-image-placeholder {
        margin-bottom:23px
    }
    .perk-description {
        font-size:14px
    }
}
/* Perk cards: inset white benefit panels, matching the supplied layout. */
#perks {
    max-width:1180px
}
#perks .section-heading {
    margin-bottom:44px
}
#perks .section-heading>p:last-child {
    max-width:535px;
    font-size:16px;
    line-height:1.75;
    margin-top:25px
}
.perk-grid {
    gap:28px
}
.perk-tile {
    padding:32px;
    border-radius:22px
}
.perk-tile .perk-hero-image {
    margin-bottom:26px;
    border-radius:14px
}
.perk-tile .perk-title-row {
    margin-bottom:13px
}
.perk-tile h3 {
    font-size:28px;
    margin-bottom:21px
}
.perk-tile .perk-description {
    font-size:15px;
    line-height:1.75;
    max-width:none;
    margin-bottom:24px
}
.perk-tile .perk-benefit {
    margin-top:auto;
    padding:20px;
    background:#fff;
    border:0;
    border-radius:20px;
    box-shadow:0 3px 3px #263a4420
}
.perk-tile .perk-benefit h4 {
    font-family:Nunito,'DM Sans',sans-serif;
    font-size:17px;
    line-height:1.4;
    font-weight:900;
    letter-spacing:-.3px;
    color:#405361;
    margin:0 0 9px
}
.perk-tile .perk-benefit p {
    font-size:14px;
    line-height:1.75;
    color:#697e8d
}
@media(max-width:700px) {
    .perk-tile {
        padding:24px
    }
    .perk-tile h3 {
        font-size:26px
    }
    .perk-tile .perk-description {
        font-size:14px
    }
    .perk-tile .perk-benefit {
        padding:18px;
        border-radius:17px
    }
    .perk-tile .perk-benefit p {
        font-size:13px
    }
    #perks .section-heading>p:last-child {
        font-size:14px
    }
}
/* Approved header and hero reference. */
.nav {
    height:88px;
    background:#272727;
    border-bottom:5px solid #fff;
    box-shadow:none;
    padding:0;
    justify-content:center
}
.logo {
    filter:none;
    letter-spacing:normal;
    display:inline-flex;
    align-items:center
}
.logo img {
    display:block;
    width:174px;
    height:auto
}
.hero-band {
    background:linear-gradient(180deg,#9b5ed7 0%,#8584e6 39%,#57d2f7 100%)
}
.hero {
    grid-template-columns:1fr 1.05fr;
    gap:80px;
    padding:58px 0 84px;
    min-height:756px
}
.hero:before {
    display:none
}
.hero-copy h1 {
    font-size:62px;
    line-height:1.1;
    letter-spacing:-1.5px;
    color:#fff;
    text-shadow:none
}
.hero-copy h1 em {
    color:#ffdd52;
    text-shadow:0 3px 0 #66529c45
}
.hero-copy .eyebrow {
    background:#ffffff55;
    border:0;
    color:#8362c5;
    padding:8px 13px;
    letter-spacing:1.05px;
    font-size:11px;
    margin-bottom:25px
}
.hero-copy .dot {
    background:#8663cf
}
.hero .intro {
    color:#fff;
    font-size:19px;
    line-height:1.65;
    max-width:505px;
    margin:30px 0 31px;
    font-weight:800
}
.hero .actions {
    gap:24px;
    flex-wrap:nowrap
}
.hero .button {
    font-size:14px;
    padding:17px 23px;
    gap:15px;
    white-space:nowrap
}
.hero .text-link {
    font-size:17px;
    white-space:nowrap;
    color:#2b668b;
    font-weight:900
}
.hero .freedom {
    font-size:14px;
    color:#2d678d;
    margin-top:25px;
    font-weight:900
}
.world {
    padding-block:30px 20px
}
.hero-art {
    aspect-ratio:1;
    border:5px solid #fff;
    border-radius:38px;
    filter:drop-shadow(0 8px 0 #3888be33)
}
.world-label {
    left:24%;
    top:9px;
    white-space:nowrap;
    transform:rotate(4deg);
    padding:8px 13px;
    background:white;
    border:2px solid #8660bc;
    border-radius:16px;
    color:#8850bd;
    font-family:'Baloo 2',sans-serif;
    font-size:21px;
    line-height:1.4;
    font-weight:800;
    box-shadow:0 3px 0 #69569d25
}
.hero .floating {
    border:2px solid #346570;
    border-radius:14px;
    background:#fff;
    padding:12px;
    gap:11px;
    box-shadow:0 5px 0 #226a8726
}
.hero .floating b {
    font-size:14px
}
.hero .floating small {
    font-size:10px
}
.hero .floating>span {
    width:43px;
    height:43px;
    border-radius:9px;
    font-size:24px
}
.hero .tag-one {
    left:-55px;
    top:23%;
    transform:rotate(-4deg)
}
.hero .tag-two {
    right:-12px;
    bottom:1%;
    transform:rotate(4deg)
}
.hero .art-note {
    display:none
}
.ribbon {
    padding:21px 30px;
    background:#ffdf56;
    border-block:3px solid #fff;
    font-size:14px;
    letter-spacing:.7px;
    color:#795323
}
.ribbon i:last-child {
    display:none
}
@media(max-width:1200px) {
    .hero {
        gap:45px;
        min-height:auto;
        padding-block:65px 80px
    }
    .hero-copy h1 {
        font-size:clamp(38px,5vw,58px)
    }
    .hero .intro {
        font-size:16px
    }
    .hero .actions {
        flex-wrap:wrap;
        gap:20px
    }
    .hero .button {
        font-size:12px;
        padding:16px 18px
    }
    .hero .text-link {
        font-size:14px
    }
    .hero .freedom {
        font-size:12px
    }
    .world-label {
        font-size:17px;
        left:20%
    }
    .hero .tag-one {
        left:-25px
    }
    .hero .floating b {
        font-size:12px
    }
    .hero .floating small {
        font-size:9px
    }
    .ribbon {
        font-size:10px
    }
}
@media(max-width:700px) {
    .nav {
        height:78px
    }
    .nav .logo img {
        width:155px
    }
    .hero {
        grid-template-columns:1fr;
        padding:42px 0 55px;
        gap:0;
        min-height:0
    }
    .hero-copy h1 {
        font-size:clamp(37px,9.8vw,60px);
        letter-spacing:-1px
    }
    .hero-copy .eyebrow {
        font-size:8px;
        letter-spacing:.8px;
        margin-bottom:23px
    }
    .hero .intro {
        font-size:16px;
        margin:23px auto 28px;
        max-width:420px
    }
    .hero .actions {
        justify-content:center;
        gap:20px
    }
    .hero .freedom {
        font-size:11px;
        margin-top:24px
    }
    .world {
        margin-top:33px;
        width:92%;
        padding-block:30px 20px
    }
    .world-label {
        font-size:15px;
        left:16%;
        top:9px;
        padding:7px 10px
    }
    .hero .floating {
        padding:8px;
        gap:8px
    }
    .hero .floating b {
        font-size:10px
    }
    .hero .floating small {
        font-size:8px
    }
    .hero .floating>span {
        width:31px;
        height:31px;
        font-size:19px
    }
    .hero .tag-one {
        left:-14px;
        top:24%
    }
    .hero .tag-two {
        right:-12px;
        bottom:1%
    }
    .hero-art {
        border-radius:28px
    }
    .ribbon {
        font-size:7px;
        letter-spacing:.7px;
        padding:17px 12px;
        gap:12px
    }
}
#perks .section-heading h2 {
    font-size:62px
}
.hero .application-icon {
    display:block;
    flex-shrink:0;
    width:20px;
    height:20px
}
.hero .button {
    gap:10px
}
.progress-section {
    background:#ffdf56;
    padding:72px 0 76px;
    border-top:0;
    border-bottom:3px solid #fff
}
.progress-layout {
    grid-template-columns:1fr 1fr;
    gap:100px
}
.progress-layout .eyebrow {
    font-size:11px;
    letter-spacing:1.6px;
    margin-bottom:28px;
    color:#a46b1f
}
.progress-layout h2 {
    font-size:46px;
    line-height:1.12;
    margin-bottom:30px;
    color:#6d4e26
}
.progress-layout h2 em {
    color:#cd6d21
}
.progress-layout>div>p:not(.eyebrow) {
    font-size:16px;
    font-weight:700;
    line-height:1.7;
    color:#86652d
}
.progress-layout>div>p+p {
    margin-top:18px
}
.reward-path {
    gap:43px
}
.reward-path:before {
    left:37px;
    top:40px;
    bottom:40px;
    border-color:#d59829
}
.reward-path article {
    gap:24px
}
.reward-path article>span {
    min-width:75px;
    width:75px;
    height:75px;
    border:2px solid #c79937;
    border-radius:14px;
    background:#fff;
    color:#ffa924;
    box-shadow:0 4px 0 #dda92e;
    font-size:29px
}
.reward-path svg {
    width:25px;
    height:25px;
    display:block
}
.reward-path small {
    font-size:9px;
    letter-spacing:1.8px;
    color:#b27b2a
}
.reward-path h3 {
    font-size:26px;
    margin:7px 0 2px;
    color:#715027
}
.reward-path p {
    font-size:15px;
    line-height:1.5;
    font-weight:700;
    color:#8a682f
}
@media(max-width:1000px) {
    .progress-layout {
        gap:40px
    }
    .progress-layout h2 {
        font-size:38px
    }
    .reward-path h3 {
        font-size:22px
    }
    .reward-path article {
        gap:17px
    }
    .reward-path p {
        font-size:13px
    }
}
@media(max-width:700px) {
    .progress-section {
        padding:48px 0
    }
    .progress-layout {
        grid-template-columns:1fr;
        gap:32px
    }
    .progress-layout h2 {
        font-size:34px
    }
    .progress-layout>div>p:not(.eyebrow) {
        font-size:14px
    }
    .reward-path {
        gap:28px
    }
    .reward-path article>span {
        min-width:60px;
        width:60px;
        height:60px
    }
    .reward-path:before {
        left:29px
    }
    .reward-path h3 {
        font-size:22px
    }
    .reward-path small {
        font-size:8px
    }
    .reward-path p {
        font-size:13px
    }
}
.points-panel {
    display:grid;
    grid-template-columns:.8fr 1.35fr;
    gap:45px;
    margin-top:55px;
    padding:36px;
    background:#fff8da;
    border:2px solid #d5a73d;
    border-radius:22px;
    box-shadow:0 6px 0 #d8aa3738;
    align-items:start
}
.points-heading {
    padding-top:12px
}
.points-heading .eyebrow {
    font-size:10px;
    letter-spacing:1.5px;
    margin-bottom:15px;
    color:#a46b1f
}
.points-heading h3 {
    font-size:34px;
    color:#715027;
    margin-bottom:18px;
    line-height:1.1
}
.points-heading>p:last-child {
    font-size:15px;
    line-height:1.7;
    color:#86652d
}
.points-table {
    width:100%;
    border-collapse:collapse;
    font-size:14px;
    color:#715027;
    text-align:left
}
.points-table thead {
    background:#ffeaa3
}
.points-table thead th {
    padding:13px 16px;
    font-size:11px;
    letter-spacing:.5px;
    font-weight:900
}
.points-table thead th:first-child {
    border-radius:10px 0 0 10px
}
.points-table thead th:last-child {
    border-radius:0 10px 10px 0;
    text-align:right
}
.points-table tbody th {
    font-weight:700;
    padding:13px 16px;
    line-height:1.5
}
.points-table td {
    padding:13px 16px;
    text-align:right;
    white-space:nowrap
}
.points-table tbody tr+tr {
    border-top:1px solid #e8d8a5
}
.points-value {
    font-family:'Baloo 2',sans-serif;
    font-size:25px;
    font-weight:800;
    color:#986516;
    line-height:1.2
}
.points-unit {
    font-family:Nunito,sans-serif;
    font-size:11px;
    font-weight:800;
    color:#a17b37
}
.points-table td small {
    display:block;
    font-size:10px;
    color:#997936;
    white-space:normal;
    margin-top:3px
}
.visually-hidden {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
@media(max-width:1000px) {
    .points-panel {
        grid-template-columns:1fr;
        gap:22px;
        padding:28px
    }
    .points-heading {
        padding:0
    }
    .points-heading h3 {
        margin-bottom:12px
    }
    .points-heading>p:last-child {
        max-width:650px
    }
}
@media(max-width:700px) {
    .points-panel {
        margin-top:36px;
        padding:21px 15px;
        gap:20px;
        border-radius:18px
    }
    .points-heading {
        padding:0 5px
    }
    .points-heading h3 {
        font-size:29px
    }
    .points-heading>p:last-child {
        font-size:14px
    }
    .points-table {
        font-size:12px
    }
    .points-table thead th {
        font-size:9px;
        padding:11px 9px
    }
    .points-table tbody th,.points-table td {
        padding:12px 9px
    }
    .points-table tbody th {
        width:65%
    }
    .points-value {
        font-size:23px
    }
    .points-table td small {
        font-size:9px
    }
    .points-unit {
        font-size:9px
    }
}
.dashboard-figure {
    margin:0;
    min-width:0
}
.dashboard-art {
    display:block;
    width:100%;
    height:auto;
    border-radius:20px;
    filter:drop-shadow(0 15px 20px #36523712)
}
.dashboard-figure figcaption {
    text-align:center;
    font-size:10px;
    color:#7b8990;
    margin-top:13px
}
@media(max-width:700px) {
    .hub-layout .dashboard-figure {
        order:2
    }
}
.inner-circle {
    background:linear-gradient(120deg,#ba52cd 0%,#db61a4 48%,#ffb032 100%);
    border:4px solid #fff;
    border-radius:29px;
    box-shadow:0 7px 0 #e8d8b2;
    padding:48px;
    grid-template-columns:1.05fr 1.2fr;
    gap:48px;
    align-items:center
}
.inner-circle .eyebrow {
    color:#fff0aa;
    font-size:14px;
    letter-spacing:1px;
    margin-bottom:13px;
    font-weight:900
}
.inner-circle h2 {
    font-size:38px;
    line-height:1.1;
    text-shadow:none;
    letter-spacing:-.6px
}
.inner-circle em {
    color:#fff097
}
.circle-perks {
    grid-template-columns:1fr 1fr;
    gap:40px
}
.circle-perks article>span {
    display:block;
    font-size:34px;
    line-height:1;
    color:#fff09a;
    margin-bottom:24px
}
.circle-perks h3 {
    font-size:22px;
    margin:0 0 17px;
    line-height:1.2;
    color:#fff
}
.circle-perks p {
    font-size:15px;
    line-height:1.65;
    color:#fff;
    font-weight:600
}
@media(max-width:1000px) {
    .inner-circle {
        padding:36px;
        gap:35px;
        grid-template-columns:1fr 1.2fr
    }
    .inner-circle h2 {
        font-size:31px
    }
    .circle-perks {
        gap:24px
    }
    .circle-perks h3 {
        font-size:19px
    }
    .circle-perks p {
        font-size:13px
    }
}
@media(max-width:700px) {
    .inner-circle {
        grid-template-columns:1fr;
        padding:28px;
        gap:32px
    }
    .inner-circle h2 {
        font-size:32px
    }
    .inner-circle .eyebrow {
        font-size:11px
    }
    .circle-perks {
        grid-template-columns:1fr;
        gap:28px
    }
    .circle-perks article {
        display:grid;
        grid-template-columns:38px 1fr;
        gap:0 14px
    }
    .circle-perks article>span {
        grid-row:1/3;
        margin:0
    }
    .circle-perks h3 {
        font-size:21px;
        margin:0 0 10px
    }
    .circle-perks p {
        grid-column:2;
        font-size:14px
    }
}
.hero-copy .dot {
    background: #734aa4;
}
.hero-copy .eyebrow {
    background: #ffffff61;
    border: 0;
    color: #684aa4;
    padding: 8px 13px;
    letter-spacing: 1.05px;
    font-size: 11px;
    margin-bottom: 25px;
}
.fireworks-layer {
    position:absolute;
    inset:30px 0 20px;
    pointer-events:none;
    z-index:1;
    border-radius:38px;
    overflow:hidden
}
.firework {
    position:absolute;
    width:1px;
    height:1px;
    color:var(--firework-color)
}
.firework:before {
    content:'';
    position:absolute;
    left:-4px;
    top:-4px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:currentColor;
    box-shadow:0 0 12px currentColor;
    animation:firework-flash 1.2s ease-out both
}
.firework span {
    position:absolute;
    left:-2px;
    top:-2px;
    width:5px;
    height:3px;
    border-radius:4px;
    background:currentColor;
    box-shadow:0 0 6px currentColor;
    animation:firework-spark 1.3s cubic-bezier(.12,.6,.3,1) both
}
.hero .floating {
    z-index:2
}
@keyframes firework-spark {
    0% {
        opacity:0;
        transform:translate(0,0) rotate(var(--spark-angle)) scale(.3)
    }
    10% {
        opacity:1
    }
    65% {
        opacity:.9
    }
    100% {
        opacity:0;
        transform:translate(var(--spark-x),var(--spark-y)) rotate(var(--spark-angle)) scale(.35)
    }
}
@keyframes firework-flash {
    0% {
        opacity:0;
        transform:scale(.2)
    }
    10% {
        opacity:1
    }
    40%,100% {
        opacity:0;
        transform:scale(1.8)
    }
}
@media(max-width:700px) {
    .fireworks-layer {
        border-radius:28px
    }
    .firework span {
        width:4px;
        height:2px
    }
}
@media(prefers-reduced-motion:reduce) {
    .fireworks-layer {
        display:none
    }
}
.hero .floating b {
    font-size:16px
}
.hero .floating small {
    font-size:12px
}
@media(max-width:700px) {
    .hero .floating b {
        font-size:12px
    }
    .hero .floating small {
        font-size:9px
    }
}
.firework span {
    width:10px;
    height:5px;
    box-shadow:0 0 10px currentColor
}
.firework:before {
    left:-6px;
    top:-6px;
    width:12px;
    height:12px;
    box-shadow:0 0 20px currentColor
}
@media(max-width:700px) {
    .firework span {
        width:7px;
        height:4px
    }
}
.firework span {
    width:14px;
    height:7px;
    box-shadow:0 0 12px currentColor,0 0 3px #fff;
    animation-duration:2.8s
}
.firework:before {
    animation-duration:2s
}
@media(max-width:700px) {
    .firework span {
        width:10px;
        height:5px
    }
}
/* Points panel reference and unclipped hero fireworks. */
.points-panel {
    background:#effaff;
    border:2px solid #00aeef;
    box-shadow:0 6px 0 #d8aa3720;
    grid-template-columns:.85fr 1.35fr;
    gap:45px;
    padding:36px
}
.points-heading .eyebrow {
    color:#506174;
    margin-bottom:10px
}
.points-heading h3 {
    color:#00aaf0;
    font-size:34px
}
.points-heading>p:last-of-type {
    color:#426987
}
.points-table {
    color:#306483
}
.points-table thead {
    background:#00aceb;
    color:white
}
.points-table thead th {
    font-size:15px;
    letter-spacing:0;
    padding:16px
}
.points-table tbody th {
    font-weight:600;
    padding-block:15px
}
.points-table td {
    padding-block:15px
}
.points-table tbody tr+tr {
    border-color:#edcf7f
}
.points-value,.points-unit {
    color:#00aaf0
}
.points-table td small {
    color:#57819a
}
.points-referral-art {
    display:block;
    width:100%;
    height:auto;
    margin-top:26px;
    border-radius:15px
}
.fireworks-layer {
    overflow:visible;
    border-radius:0
}
@media(max-width:1000px) {
    .points-panel {
        grid-template-columns:1fr;
        gap:24px;
        padding:28px
    }
    .points-referral-art {
        max-width:380px;
        margin-inline:auto
    }
}
@media(max-width:700px) {
    .points-panel {
        padding:21px 15px
    }
    .points-heading h3 {
        font-size:29px
    }
    .points-table thead th {
        font-size:10px;
        padding:12px 9px
    }
    .points-table tbody th,.points-table td {
        padding:12px 9px
    }
    .points-referral-art {
        max-width:320px;
        margin-top:20px
    }
    .fireworks-layer {
        overflow:visible
    }
}
.points-table tbody tr+tr {
    border-color:#64b2d2
}
.points-table tbody tr + tr {
    border-color: #badfef;
}
.points-heading .eyebrow {
    color: #506174;
    margin-bottom: 2px;
    font-size: 12px;
    letter-spacing: 1.3px;
}
.points-heading {
    padding-top: 0;
}
.points-table td {
    padding-block: 11px;
}
.progress-layout .eyebrow {
    font-size: 13px;
    letter-spacing: 1.3px;
    margin-bottom: 10px;
    color: #a46b1f;
}
.progress-layout h2 {
    font-size: 46px;
    line-height: 1.12;
    margin-bottom: 24px;
    color: #6d4e26;
}
.reward-path h3 {
    font-size: 26px;
    margin: 0;
    color: #715027;
}
.progress-section {
    background: #ffdf56;
    padding: 72px 0 72px;
    border-top: 0;
    border-bottom: 3px solid #fff;
}
.dashboard-art {
    transform:rotate(-2deg)
}
.dashboard-art {
    transform:none
}
#hub .eyebrow {
    font-size: 12px;
    letter-spacing: 1.3px;
    margin-bottom: 6px;
}
#hub h2 {
    font-size: 52px;
}
.mini-benefit p {
    font-size: 14px;
}
.mini-benefit>span {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #edf0e3;
    color: #7c925e;
    font-size: 22px;
}
#hub .hub-intro {
    font-weight: 700;
}
.mini-benefit>span {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #d8f0ff;
    color: #3496d3;
    font-size: 22px;
    border: 2px solid #3496d3;
}
#apply {
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:center;
    padding-block:90px
}
#apply>.application {
    padding:32px;
    background:#fff;
    border:3px solid #258eac;
    border-radius:23px;
    box-shadow:0 6px 0 #bfe6ef
}
#apply .eyebrow {
    font-size:13px;
    letter-spacing:1.2px;
    color:#0083aa;
    margin-bottom:16px;
    font-weight:800
}
#apply h2 {
    font-size:46px;
    line-height:1.1;
    color:#1594b7;
    margin-bottom:31px;
    letter-spacing:-.5px
}
#apply h2 em {
    color:#f14a98
}
#apply .apply-intro {
    font-size:18px;
    font-weight:700;
    line-height:1.65;
    color:#4a657b;
    margin-bottom:32px
}
#apply .check {
    font-size:18px;
    font-weight:800;
    color:#11ab8c;
    margin-top:19px
}
#apply .application .eyebrow {
    margin-bottom:10px;
    font-size:13px
}
#apply .application h3 {
    font-size:34px;
    color:#168eae;
    line-height:1.15;
    letter-spacing:-.4px
}
#apply .application ol {
    margin:31px 0 28px;
    padding:0
}
#apply .application li {
    padding-left:54px;
    margin:24px 0
}
#apply .application li:before {
    width:37px;
    height:37px;
    background:#ffdf56;
    border:1px solid #e8bc31;
    color:#91611e;
    font-size:16px;
    top:0
}
#apply .application li b {
    font-size:18px;
    font-weight:700;
    color:#2b4250
}
#apply .application li p {
    font-size:14px;
    line-height:1.65;
    color:#526c82;
    margin-top:9px
}
#apply .application .button {
    font-size:18px;
    padding:17px 20px;
    gap:10px;
    border-radius:14px
}
#apply .application>.subtle {
    font-size:14px;
    color:#81909a;
    margin-top:23px;
    text-align:center
}
@media(max-width:1000px) {
    #apply {
        gap:40px
    }
    #apply h2 {
        font-size:39px
    }
    #apply .apply-intro,#apply .check {
        font-size:16px
    }
    #apply>.application {
        padding:27px
    }
    #apply .application h3 {
        font-size:29px
    }
    #apply .application .button {
        font-size:14px
    }
    #apply .application li b {
        font-size:16px
    }
}
@media(max-width:700px) {
    #apply {
        grid-template-columns:1fr;
        gap:35px;
        padding-block:60px
    }
    #apply h2 {
        font-size:36px
    }
    #apply .eyebrow,#apply .application .eyebrow {
        font-size:10px
    }
    #apply .apply-intro {
        font-size:16px;
        margin-bottom:25px
    }
    #apply .check {
        font-size:15px
    }
    #apply>.application {
        padding:24px
    }
    #apply .application h3 {
        font-size:28px
    }
    #apply .application li {
        padding-left:45px
    }
    #apply .application li:before {
        width:31px;
        height:31px;
        font-size:14px
    }
    #apply .application li p {
        font-size:13px
    }
    #apply .application>.subtle {
        font-size:12px
    }
    #apply .application .button {
        font-size:13px
    }
}
.faq summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 17px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.faq h2 {
    font-size: 32px;
    margin-bottom: 25px;
    letter-spacing: 0;
    color: #1188b0;
}
.faq details p {
    font-size: 14px;
    margin-top: 15px;
    max-width: 720px;
}
.closing {
    background:linear-gradient(115deg,#ffc437 0%,#f97f35 43%,#ec263a 100%);
    padding:64px 24px 65px;
    border:0;
    text-align:center
}
.closing .eyebrow {
    color:#fff2ce;
    font-size:14px;
    letter-spacing:1px;
    font-weight:900;
    margin-bottom:12px
}
.closing h2 {
    font-size:52px;
    line-height:1.12;
    letter-spacing:-.5px;
    color:#fff;
    text-shadow:0 3px 0 #89432266;
    margin-bottom:35px
}
.closing h2 em {
    color:#ffdf61
}
.closing .button {
    font-size:18px;
    padding:17px 24px;
    gap:10px;
    border-radius:14px
}
@media(max-width:700px) {
    .closing {
        padding:48px 18px 52px
    }
    .closing .eyebrow {
        font-size:11px
    }
    .closing h2 {
        font-size:36px;
        margin-bottom:29px
    }
    .closing .button {
        font-size:13px;
        padding:16px 19px
    }
}
footer.wrap {
    display:block;
    width:100%;
    padding:30px 0;
    background:#272727;
    border-top:5px solid #fff;
    color:#ffdf56
}
.footer-content {
    width:min(1180px,calc(100% - 80px));
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    align-items:center;
    gap:24px
}
.footer-content .logo img {
    width:174px;
    height:auto
}
.footer-content p {
    font-size:12px;
    line-height:1.5;
    color:#939ba2;
    text-align:center;
    order:0;
    width:auto
}
.footer-content .footer-apply {
    font-size:18px;
    font-weight:800;
    color:#ffdf32;
    justify-self:end;
    margin:0;
    white-space:nowrap
}
@media(max-width:700px) {
    footer.wrap {
        padding:26px 0
    }
    .footer-content {
        width:calc(100% - 36px);
        grid-template-columns:1fr 1fr;
        gap:21px
    }
    .footer-content .logo img {
        width:145px
    }
    .footer-content p {
        grid-row:2;
        grid-column:1/-1;
        font-size:11px
    }
    .footer-content .footer-apply {
        grid-column:2;
        grid-row:1;
        font-size:15px
    }
}
.closing {
    padding:64px 24px 64px;
    background:linear-gradient(115deg,#ffc437 0%,#f97f35 43%,#ec263a 100%)
}
.closing .eyebrow {
    margin-bottom:14px
}
.closing h2 {
    font-size:38px;
    line-height:1.15;
    margin-bottom:42px;
    letter-spacing:-.4px
}
.closing h2 em {
    display:inline-block;
    font-size:68px;
    line-height:1.1;
    margin-top:4px;
    color:#ffdf61
}
@media(max-width:700px) {
    .closing {
        padding:48px 18px 52px
    }
    .closing h2 {
        font-size:27px;
        margin-bottom:32px
    }
    .closing h2 em {
        font-size:48px;
        margin-top:8px
    }
}
/* Keep rotated labels stable while fireworks animate beneath them. */
.fireworks-layer {
    isolation:isolate;
    transform:translateZ(0)
}
.hero .floating {
    backface-visibility:hidden;
    will-change:transform
}
.hero .tag-one {
    transform:translateZ(0) rotate(-4deg)
}
.hero .tag-two {
    transform:translateZ(0) rotate(4deg)
}
.hero .world-label {
    backface-visibility:hidden;
    will-change:transform;
    transform:translateZ(0) rotate(4deg)
}
.closing .button {
    background: #ffe366;
    color: #8b4b2c;
    border: 2px solid #986039;
    box-shadow: 0 5px 0 #98502e, inset 0 2px 0 #fff5ad;
    text-shadow: none;
}
.closing .button:hover {
    background: #ffdc4e;
}
.paid-opportunities {
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:72px;
    align-items:center;
    padding-bottom:10px
}
.paid-art-placeholder {
    aspect-ratio:1;
    position:relative;
    background:radial-gradient(ellipse at 50% 40%,#eee4ff 0%,#e7edff 55%,#dcf5ff 100%);
    border:3px solid #9774c8;
    border-radius:28px;
    box-shadow:0 7px 0 #d9c8ed;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden
}
.paid-level {
    position:absolute;
    top:25px;
    left:25px;
    background:#ffe481;
    color:#8d6525;
    padding:7px 16px;
    border:1px solid #d9b350;
    border-radius:30px;
    font-size:12px;
    font-weight:900;
    letter-spacing:1.3px
}
.paid-placeholder-symbol {
    width:150px;
    height:150px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#ffffff88;
    color:#b590d7;
    font-size:95px;
    margin-bottom:26px;
    box-shadow:0 0 0 18px #ffffff30
}
.paid-art-label {
    color:#8561ab;
    font-size:11px;
    font-weight:900;
    letter-spacing:2px
}
.paid-art-placeholder small {
    font-size:12px;
    color:#8c80a0;
    margin-top:8px
}
.paid-copy .eyebrow {
    font-size:12px;
    letter-spacing:1.3px;
    margin-bottom:10px;
    color:#8560af
}
.paid-copy h2 {
    font-size:48px;
    line-height:1.1;
    color:#168eae;
    margin-bottom:24px
}
.paid-copy h2 em {
    color:#9a61c9
}
.paid-intro {
    font-size:16px;
    line-height:1.75;
    font-weight:700;
    color:#526c82
}
.paid-copy>h3 {
    font-size:21px;
    margin-top:24px;
    color:#344b5b
}
.paid-options {
    list-style:none;
    padding:0;
    margin:20px 0 24px;
    display:grid;
    gap:19px
}
.paid-options li {
    display:flex;
    gap:15px;
    align-items:flex-start
}
.paid-options li>span {
    width:37px;
    height:37px;
    flex-shrink:0;
    border-radius:9px;
    background:#f0e8fa;
    color:#9865bc;
    display:grid;
    place-items:center;
    font-size:22px;
    border:1px solid #dbc5ed
}
.paid-options strong {
    font-size:16px;
    font-weight:900;
    color:#44556a
}
.paid-options p {
    font-size:14px;
    line-height:1.6;
    color:#667e8e;
    margin-top:3px
}
.paid-note {
    font-size:13px;
    line-height:1.7;
    background:#f3edf9;
    border-left:3px solid #ae85cf;
    padding:15px 18px;
    border-radius:0 10px 10px 0;
    color:#756383
}
@media(max-width:1000px) {
    .paid-opportunities {
        gap:40px
    }
    .paid-copy h2 {
        font-size:40px
    }
}
@media(max-width:700px) {
    .paid-opportunities {
        grid-template-columns:1fr;
        gap:34px;
        padding-bottom:0
    }
    .paid-art-placeholder {
        aspect-ratio:4/3;
        order:2
    }
    .paid-copy h2 {
        font-size:36px
    }
    .paid-intro {
        font-size:15px
    }
    .paid-copy .eyebrow {
        font-size:10px
    }
    .paid-placeholder-symbol {
        width:110px;
        height:110px;
        font-size:70px
    }
    .paid-options strong {
        font-size:15px
    }
}
.paid-opportunities-band {
    background:linear-gradient(120deg,#f1e3fb 0%,#e7eaff 48%,#d8f5ff 100%);
    border-block:3px solid #fff;
    margin-top:80px
}
.paid-opportunities-band .paid-opportunities {
    padding-block:76px;
    gap:72px
}
.paid-opportunities-band .paid-art-placeholder {
    box-shadow:0 7px 0 #c8b8e244,0 18px 40px #77629a12
}
.paid-opportunities-band .paid-note {
    background:#ffffff80
}
@media(max-width:1000px) {
    .paid-opportunities-band .paid-opportunities {
        gap:40px;
        padding-block:60px
    }
}
@media(max-width:700px) {
    .paid-opportunities-band {
        margin-top:50px
    }
    .paid-opportunities-band .paid-opportunities {
        padding-block:48px;
        gap:32px
    }
}
.paid-art {
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:1;
    object-fit:contain;
    border:3px solid #9774c8;
    border-radius:28px;
    box-shadow:0 7px 0 #c8b8e244,0 18px 40px #77629a12
}
@media(max-width:700px) {
    .paid-art {
        order:2
    }
}
.paid-opportunities-band {
    background:linear-gradient(115deg,#e3e0ef 0%,#f9faff 50%,#bde8f5 100%);
    border:0;
    margin-top:80px
}
.paid-opportunities-band .paid-opportunities {
    grid-template-columns:1fr 1.1fr;
    gap:72px;
    padding-block:72px;
    align-items:center
}
.paid-copy .eyebrow {
    font-size:12px;
    letter-spacing:1.3px;
    margin-bottom:14px;
    color:#8f53c2
}
.paid-copy h2 {
    font-size:46px;
    line-height:1.15;
    margin-bottom:30px;
    color:#1592b0;
    letter-spacing:-.4px
}
.paid-copy h2 em {
    color:#9d61cd
}
.paid-intro {
    font-size:16px;
    font-weight:700;
    line-height:1.75;
    color:#526c82
}
.paid-copy>h3 {
    font-size:23px;
    margin-top:27px;
    margin-bottom:22px;
    color:#344b5b
}
.paid-options {
    margin:0 0 27px;
    gap:21px
}
.paid-options li {
    gap:15px;
    align-items:center
}
.paid-options li>span {
    width:50px;
    height:50px;
    border-radius:9px;
    background:#f0e8fa;
    border:2px solid #ad7ed3;
    color:#9a60c7;
    font-size:22px
}
.paid-options strong {
    font-size:18px;
    font-weight:900;
    color:#445b73
}
.paid-options p {
    font-size:14px;
    font-weight:600;
    line-height:1.6;
    color:#648399;
    margin-top:3px
}
.paid-opportunities-band .paid-note {
    background:#ffffff80;
    border-left:3px solid #ae85cf;
    padding:15px 18px;
    font-size:13px;
    line-height:1.7;
    border-radius:10px;
    color:#857394;
    box-shadow:0 3px 4px #35577608
}
.paid-art {
    border-color:#75469c;
    border-radius:28px;
    box-shadow:0 7px 0 #c8b8e244,0 18px 40px #77629a12
}
@media(max-width:1000px) {
    .paid-opportunities-band .paid-opportunities {
        gap:40px;
        padding-block:60px
    }
    .paid-copy h2 {
        font-size:40px
    }
    .paid-options strong {
        font-size:16px
    }
}
@media(max-width:700px) {
    .paid-opportunities-band {
        margin-top:50px
    }
    .paid-opportunities-band .paid-opportunities {
        grid-template-columns:1fr;
        gap:32px;
        padding-block:48px
    }
    .paid-copy h2 {
        font-size:36px
    }
    .paid-copy .eyebrow {
        font-size:10px
    }
    .paid-intro {
        font-size:15px
    }
    .paid-options strong {
        font-size:15px
    }
    .paid-art {
        order:2
    }
}
/* Final responsive pass: explicit overrides after all approved desktop refinements. */
body {
    overflow-x:clip
}
img {
    max-width:100%
}
.hero-copy,.hub-layout>div,.apply-layout>div,.paid-copy,.progress-layout>div,.points-heading,.points-table-wrap {
    min-width:0
}
.summary::-webkit-details-marker {
    display:none
}
.faq summary::-webkit-details-marker {
    display:none
}
.faq summary {
    min-height:44px;
    align-items:center
}
.points-heading>p:last-of-type {
    font-size:15px
}
@media(min-width:701px) and (max-width:1100px) {
    .hero {
        gap:38px
    }
    .hero-copy h1 {
        font-size:clamp(35px,4.7vw,52px)
    }
    .hero .actions {
        flex-wrap:wrap
    }
    .hero .freedom {
        font-size:11px
    }
    .hero .floating b {
        font-size:12px
    }
    .hero .floating small {
        font-size:9px
    }
    .world-label {
        font-size:16px
    }
    #perks .section-heading h2 {
        font-size:52px
    }
    .perk-tile {
        padding:25px
    }
    .perk-tile h3 {
        font-size:25px
    }
    #hub h2 {
        font-size:42px
    }
    .hub-layout {
        gap:40px
    }
    .inner-circle {
        grid-template-columns:1fr;
        gap:30px
    }
    .inner-circle h2 {
        font-size:36px
    }
    .progress-layout {
        gap:35px
    }
    .progress-layout h2 {
        font-size:37px
    }
    .reward-path h3 {
        font-size:22px
    }
    .reward-path article>span {
        min-width:60px;
        width:60px;
        height:60px
    }
    .reward-path:before {
        left:29px
    }
    #apply h2 {
        font-size:38px
    }
    #apply .application h3 {
        font-size:28px
    }
    #apply .application .button {
        font-size:13px
    }
}
@media(max-width:700px) {
    .wrap {
        width:calc(100% - 36px)
    }
    .section {
        padding-block:52px
    }
    .hero-copy h1 {
        font-size:clamp(33px,9vw,54px)
    }
    .hero-copy .eyebrow {
        font-size:9px;
        letter-spacing:.7px;
        padding:7px 10px;
        margin-bottom:22px
    }
    .hero .button {
        font-size:12px;
        white-space:normal;
        min-height:48px
    }
    .hero .actions {
        flex-wrap:wrap
    }
    .hero .intro {
        font-size:15px
    }
    .hero .floating b {
        font-size:11px
    }
    .hero .floating small {
        font-size:9px
    }
    .hero .floating {
        padding:8px
    }
    .world-label {
        font-size:14px;
        left:12%
    }
    .hero .freedom {
        font-size:10px
    }
    .ribbon {
        flex-wrap:wrap;
        white-space:normal;
        gap:8px 14px;
        text-align:center;
        font-size:9px;
        padding:14px 18px
    }
    .ribbon>span:nth-of-type(3) {
        display:inline
    }
    .ribbon i {
        font-size:13px
    }
    #perks .section-heading h2 {
        font-size:clamp(34px,9vw,44px)
    }
    .perk-tile h3 {
        font-size:25px
    }
    .perk-benefit p {
        font-size:14px
    }
    .perk-tier {
        font-size:9px
    }
    .perk-gems .perk-title-row {
        padding-right:125px
    }
    .progress-section {
        padding:48px 0
    }
    .progress-layout .eyebrow {
        font-size:11px
    }
    .progress-layout h2 {
        font-size:34px
    }
    .reward-path h3 {
        font-size:22px
    }
    .reward-path small {
        letter-spacing:1px
    }
    .reward-path p {
        font-size:14px
    }
    #hub h2 {
        font-size:38px
    }
    #hub .eyebrow {
        font-size:10px
    }
    .mini-benefit>span {
        width:44px;
        height:44px
    }
    .mini-benefit p {
        font-size:14px
    }
    .dashboard-figure {
        max-width:480px;
        justify-self:center
    }
    .inner-circle {
        padding:25px;
        gap:28px
    }
    .inner-circle h2 {
        font-size:30px
    }
    .circle-perks p {
        font-size:14px
    }
    #apply h2 {
        font-size:36px
    }
    #apply .application .button {
        font-size:12px;
        white-space:normal;
        min-height:48px
    }
    .faq h2 {
        font-size:27px
    }
    .faq summary {
        font-size:16px
    }
    .faq details p {
        font-size:14px
    }
    .points-heading .eyebrow {
        font-size:11px
    }
    .points-table th,.points-table td {
        overflow-wrap:anywhere
    }
    .points-table td {
        white-space:normal
    }
    .points-table thead th {
        font-size:10px
    }
    .points-value {
        white-space:nowrap
    }
    .closing h2 {
        font-size:27px
    }
    .closing h2 em {
        font-size:48px
    }
    .closing .button {
        min-height:48px
    }
}
@media(max-width:380px) {
    .world-label {
        font-size:12px
    }
    .hero .floating b {
        font-size:10px
    }
    .hero .floating small {
        font-size:8px
    }
    .hero .floating>span {
        width:26px;
        height:26px
    }
    .hero .freedom {
        font-size:9px
    }
    .points-value {
        font-size:20px
    }
    #hub h2 {
        font-size:34px
    }
    .closing h2 em {
        font-size:42px
    }
}
/* Override intrinsic height attributes when images scale responsively. */
.hero-art,
.perk-hero-image {
    height: auto;
}
.perk-hero-image {
    flex-shrink: 0;
}
.logo img {
    display: block;
    width: auto;
    height: auto;
}
@media (max-width: 700px) {
    .nav .logo img {
        width: auto;
    }
    .wrap:not(.nav) {
        width: calc(100% - 36px);
    }
    .nav.wrap {
        width: 100%;
    }
}
@media (max-width: 700px) {
    .hero .actions {
        flex-direction: column;
        align-items: center;
    }
}
@media (max-width: 700px) {
    .hero .text-link {
        color: #FFF;
    }
    .hero .freedom {
        color: #FFF;
    }
    .hero .world-label {
        left: 50%;
        font-size: 16px;
        transform: translateX(-50%) translateZ(0) rotate(4deg);
    }
}
.faq details:last-of-type {
    border-bottom: none;
}
.faq {
    padding-bottom: 55px;
}
@media (max-width: 700px) {
    .points-table thead th {
        font-size: 12px;
        line-height: 1em;
    }
}
@media (max-width: 700px) {
    .hub-layout {
        gap: 24px;
    }
    #hub {
        padding-block: 40px;
    }
}
.faq summary {
    min-height: 44px;
    align-items: center;
    font-weight: 700;
}
@media (max-width: 700px) {
    .faq {
        padding-bottom: 30px;
    }
    .ribbon {
        gap: 8px 31px;
    }
    .ribbon i {
        display: none;
    }
}
@media (max-width: 380px) {
    .closing h2 {
        font-size: 20px;
        margin-bottom: 22px;
    }
    .closing h2 em {
        font-size: 48px;
        margin-top: 1px;
    }
    .hero .freedom {
        font-size: 11px;
    }
}
.ribbon {
    display: block;
    padding-inline: 0;
}
.ribbon-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}
.ribbon-content > i:last-child {
    display: none;
}
@media (max-width: 700px) {
    .ribbon-content {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px 31px;
    }
    .ribbon-content i {
        display: none;
    }
}
/* Position badge progression relative to the artwork, not the card. */
.badge-image-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 26px;
    flex-shrink: 0;
}
.perk-tile .badge-image-wrap .perk-hero-image {
    margin-bottom: 0;
}
.badge-level-overlay {
    position: absolute;
    right: -0.5%;
    bottom: -8%;
    width: 28%;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 3px 2px #263a4426);
}
.badge-level-overlay { width: 153px; max-width: none; }
@media (max-width: 600px) {
    .badge-level-overlay {
        width: 28%;
        max-width: 153px;
    }
}
.progress-icon {
    display: block;
    width: 42px;
    height: 42px;
    background-color: #efa900;
    -webkit-mask: var(--progress-icon) center / contain no-repeat;
    mask: var(--progress-icon) center / contain no-repeat;
}
.progress-icon-verify { --progress-icon: url("https://cdn.pixadom.com/website/creators/icon-verify.304ec57e.webp"); }
.progress-icon-marketing { --progress-icon: url("https://cdn.pixadom.com/website/creators/icon-marketing.b2439911.webp"); }
.progress-icon-trophy { --progress-icon: url("https://cdn.pixadom.com/website/creators/icon-trophy.db7e3715.webp"); }
@media (max-width: 700px) {
    .progress-icon { width: 34px; height: 34px; }
}

.mini-benefit>span { width:72px; height:72px; }
.hub-icon { display:block; width:48px; height:48px; background-color:#117fa4; -webkit-mask:var(--hub-icon) center / contain no-repeat; mask:var(--hub-icon) center / contain no-repeat; }
.hub-icon-star { --hub-icon:url("https://cdn.pixadom.com/website/creators/icon-star.c80fd66a.webp"); }
.hub-icon-eye { --hub-icon:url("https://cdn.pixadom.com/website/creators/icon-eye.9cb2cde5.webp"); }
.hub-icon-magnifier { --hub-icon:url("https://cdn.pixadom.com/website/creators/icon-magnifier.94eb15ce.webp"); }

.paid-icon { display:block; width:30px; height:30px; background-color:#9865bc; -webkit-mask:var(--paid-icon) center / contain no-repeat; mask:var(--paid-icon) center / contain no-repeat; }
.paid-icon-video-player { --paid-icon:url("https://cdn.pixadom.com/website/creators/icon-video-player.a140445e.webp"); }
.paid-icon-snowflake { --paid-icon:url("https://cdn.pixadom.com/website/creators/icon-snowflake.0df731cf.webp"); }
.paid-icon-coins { --paid-icon:url("https://cdn.pixadom.com/website/creators/icon-coins.7a956342.webp"); }
.hub-icon-magnifier {
    width: 40px;
    height: 40px;
}
.hub-icon-eye {
    width: 45px;
    height: 45px;
}

.community-icon { display:block; height:48px; background-color:#fff; opacity:.5; -webkit-mask:var(--community-icon) center / contain no-repeat; mask:var(--community-icon) center / contain no-repeat; }
.community-icon-window { width:45px; }
.community-icon-group { width:65px; }
.inner-circle .circle-perks article>span { margin-bottom:10px; }
.community-icon-window { --community-icon:url("https://cdn.pixadom.com/website/creators/icon-window.a7460e1b.webp"); }
.community-icon-group { --community-icon:url("https://cdn.pixadom.com/website/creators/icon-group.b90692e3.webp"); }
@media(max-width:700px) { .inner-circle .circle-perks article { grid-template-columns:65px minmax(0,1fr); } .inner-circle .circle-perks article>span { margin-bottom:0; } }
.community-icon-window {
    width: 37px;
}
/* Keep icon boxes stable and text columns flexible on smaller screens. */
.mini-benefit>div,
.paid-options li>div,
.reward-path article>div {
    min-width: 0;
}
.progress-icon,
.hub-icon,
.paid-icon,
.community-icon {
    flex-shrink: 0;
}
@media (max-width: 1000px) {
    .mini-benefit,
    .paid-options li,
    .reward-path article {
        align-items: flex-start;
    }
}
@media (max-width: 700px) {
    .mini-benefit {
        gap: 14px;
    }
    .mini-benefit>span {
        width: 72px;
        height: 72px;
    }
    .paid-options li>span {
        flex-shrink: 0;
    }
    .inner-circle .circle-perks article {
        grid-template-columns: 65px minmax(0, 1fr);
        align-items: start;
    }
    .inner-circle .circle-perks article>span {
        height: 48px;
        display: grid;
        align-items: center;
        margin-bottom: 0;
    }
}
#perks .section-heading .eyebrow,
.progress-layout .eyebrow,
#hub .eyebrow,
.paid-copy .eyebrow,
#apply .eyebrow,
#apply .application .eyebrow {
    font-size: 12px;
    letter-spacing: 1.3px;
}
/* Connect icon centers instead of sizing the line to the text column. */
@media (max-width: 330px) {
    .reward-path::before {
        display: none;
    }
    .reward-path article:not(:last-child)::before {
        content: '';
        position: absolute;
        left: 29px;
        top: 30px;
        bottom: -58px;
        border-left: 2px dashed #d59829;
        pointer-events: none;
    }
    .reward-path article>span {
        position: relative;
        z-index: 1;
    }
}
@media (max-width: 600px) {
    .mini-benefit>span {
        width: 52px;
        height: 52px;
    }
    .hub-icon {
        width: 60%;
    }
    .hub-icon-magnifier {
        width: 52%;
    }
}
@media (max-width: 700px) {
    .inner-circle .circle-perks article>span {
        width: 100%;
        justify-items: center;
        align-items: center;
    }
}

.apply-exam-icon { display:block; flex-shrink:0; width:36px; height:36px; background-color:#fff; -webkit-mask:url("https://cdn.pixadom.com/website/creators/icon-exam.669e2cc9.webp") center / contain no-repeat; mask:url("https://cdn.pixadom.com/website/creators/icon-exam.669e2cc9.webp") center / contain no-repeat; }
#apply .application .button { font-size:26px; gap:14px; padding:15px 20px; }
#apply .application li { margin:20px 0; }
@media(max-width:1000px) { #apply .application .button { font-size:23px; } .apply-exam-icon { width:32px; height:32px; } }
@media(max-width:700px) { #apply .application .button { font-size:22px; gap:12px; padding:14px 16px; } .apply-exam-icon { width:30px; height:30px; } }
@media(max-width:380px) { #apply .application .button { font-size:20px; gap:10px; } .apply-exam-icon { width:27px; height:27px; } }

.closing-up-icon { display:block; flex-shrink:0; width:28px; height:28px; background-color:currentColor; -webkit-mask:url("https://cdn.pixadom.com/website/creators/icon-up-arrow.41a70f65.webp") center / contain no-repeat; mask:url("https://cdn.pixadom.com/website/creators/icon-up-arrow.41a70f65.webp") center / contain no-repeat; }
@media(max-width:700px) { .closing-up-icon { width:23px; height:23px; } }
@media(max-width:380px) { .closing-up-icon { width:21px; height:21px; } }

.hero-asset-icon { display:block; flex-shrink:0; background-color:currentColor; -webkit-mask:var(--hero-mask) center / contain no-repeat; mask:var(--hero-mask) center / contain no-repeat; }
.hero-form-icon { --hero-mask:url("https://cdn.pixadom.com/website/creators/icon-exam.669e2cc9.webp"); }
.hero-down-icon { --hero-mask:url("https://cdn.pixadom.com/website/creators/icon-down-arrow.486d3c6d.webp"); }
.hero-sparkle-icon,.ribbon-sparkle-icon { --hero-mask:url("https://cdn.pixadom.com/website/creators/icon-sparkle.13490620.webp"); }
.hero-diamond-icon { --hero-mask:url("https://cdn.pixadom.com/website/creators/icon-diamond.f8dda592.webp"); }
.hero-like-icon { --hero-mask:url("https://cdn.pixadom.com/website/creators/icon-like.b068f25a.webp"); }

.hero-form-icon { width:23px; height:23px; color:#fff; }
.hero .text-link { display:inline-flex; align-items:center; gap:7px; }
.hero-down-icon { width:21px; height:24px; }
.hero .freedom { display:flex; align-items:center; flex-wrap:wrap; gap:10px 19px; }
.hero .freedom>span { display:inline-flex; align-items:center; gap:4px; }
.hero-sparkle-icon { width:16px; height:16px; }
.hero-diamond-icon { width:29px; height:29px; color:#df5fa0; }
.hero-like-icon { width:27px; height:27px; color:#e49757; }
.ribbon-sparkle-icon { width:22px; height:22px; color:#e99a21; }
@media(max-width:700px) {
 .hero-form-icon { width:21px; height:21px; }
 .hero-down-icon { width:18px; height:21px; }
 .hero .freedom { justify-content:center; gap:9px 14px; }
 .hero-sparkle-icon { width:14px; height:14px; }
 .hero-diamond-icon { width:23px; height:23px; }
 .hero-like-icon { width:22px; height:22px; }
 .ribbon .ribbon-sparkle-icon { display:none; }
}

#apply .check { display:flex; align-items:center; gap:12px; }
.apply-check-icon { display:block; flex-shrink:0; width:28px; height:28px; background-color:#11ab8c; -webkit-mask:url("https://cdn.pixadom.com/website/creators/icon-check.ef65914a.webp") center / contain no-repeat; mask:url("https://cdn.pixadom.com/website/creators/icon-check.ef65914a.webp") center / contain no-repeat; }
@media(max-width:700px) { #apply .check { gap:10px; align-items:flex-start; } .apply-check-icon { width:24px; height:24px; } }
.closing-up-icon {
    width: 23px;
    height: 23px;
}
/* <picture> only selects a WebP or PNG source; it generates no box, so each
   artwork <img> keeps its own place in the surrounding grid or flex layout. */
picture {
    display: contents;
}
/* How points are earned: playtime track, Gem tiles and Supporter tiles */
.earn {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 14px;
    max-width: 760px;
    margin: 18px 0 8px;
}
.earn-card {
    --tint: #e4f8ff;
    --edge: #2a9fc4;
    --ink: #1188b0;
    padding: 16px 18px 18px;
    background: var(--tint);
    border: 2px solid var(--edge);
    border-radius: 18px;
    box-shadow: 0 5px 0 color-mix(in srgb, var(--edge) 35%, transparent);
}
.earn-play { grid-column: 1 / -1; }
.earn-gems { --tint: #fff0f8; --edge: #d65aa0; --ink: #c2367f; }
.earn-support { --tint: #fff6d6; --edge: #e2a91f; --ink: #a86a00; }
.earn-card header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 14px;
}
.earn-card h3 {
    margin: 0;
    font-family: 'Baloo 2', sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ink);
}
.earn-icon {
    display: block;
    width: 26px;
    height: 26px;
    background-color: var(--ink);
    -webkit-mask: var(--earn-icon) center / contain no-repeat;
    mask: var(--earn-icon) center / contain no-repeat;
}
.earn-play .earn-icon { --earn-icon: url("https://cdn.pixadom.com/website/creators/icon-group.b90692e3.webp"); width: 32px; }
.earn-gems .earn-icon { --earn-icon: url("https://cdn.pixadom.com/website/creators/icon-diamond.f8dda592.webp"); }
.earn-support .earn-icon { --earn-icon: url("https://cdn.pixadom.com/website/creators/icon-star.c80fd66a.webp"); }
.earn-tag {
    margin-left: auto;
    padding: 3px 10px;
    background: #fff;
    border: 1.5px solid var(--edge);
    border-radius: 20px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.earn strong {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    line-height: 1;
    color: var(--ink);
}
.earn strong span {
    font-family: Nunito, sans-serif;
    font-size: 11px;
    font-weight: 800;
}
.earn-label {
    color: #306483;
    font-size: 13px;
    font-weight: 700;
}
/* Playtime milestones as a connected track */
.earn-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
.earn-track::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 10%;
    right: 10%;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, #9fdcf0, var(--edge));
}
.earn-track li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.earn-track strong {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border: 3px solid var(--edge);
    border-radius: 50%;
    background: #fff;
    font-size: 21px;
}
.earn-track li:last-child strong {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}
.earn-track strong span { display: block; margin-top: -2px; }
.earn-track li:last-child strong span { color: #fff; }
.earn-note {
    margin: 14px 0 0;
    font-size: 13px;
    color: #306483;
}
.earn-note strong {
    font-size: 15px;
}
/* Gem and Supporter amounts as tiles */
.earn-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.earn-support .earn-tiles { grid-template-columns: 1fr; }
.earn-tiles li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--edge) 45%, #fff);
    border-radius: 12px;
}
.earn-support .earn-tiles li {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.earn-tiles strong { font-size: 22px; }
@media (max-width: 700px) {
    .earn { grid-template-columns: 1fr; }
    .earn-card { padding: 14px 12px 16px; }
    .earn-track { gap: 2px; }
    .earn-track::before { top: 25px; }
    .earn-track strong { width: 52px; height: 52px; font-size: 17px; border-width: 2.5px; }
    .earn-track strong span { font-size: 9px; }
    .earn-label { font-size: 12px; }
    .earn-tiles strong { font-size: 19px; }
    .earn-tiles { gap: 6px; }
    .earn-tiles li { padding: 9px 8px; }
    .earn-tiles .earn-label { font-size: 11px; white-space: nowrap; }
}
/* Inside the "See how your points grow" panel: cards stacked in one column */
.earn--panel {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: none;
    margin: 0;
}
.earn--panel .earn-card h3 { font-size: 21px; }
.earn--panel .earn-card header { margin-bottom: 10px; }
.earn--panel .earn-support .earn-tiles { grid-template-columns: repeat(3, 1fr); }
/* Compact one-line tiles keep the panel close to the height of the old table */
.earn--panel .earn-tiles li,
.earn--panel .earn-support .earn-tiles li {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
}
.earn--panel .earn-tiles strong { font-size: 19px; white-space: nowrap; }
.earn--panel .earn-tiles .earn-label { white-space: nowrap; }
@media (max-width: 700px) {
    .earn--panel .earn-tiles { grid-template-columns: repeat(2, 1fr); }
    .earn--panel .earn-support .earn-tiles { grid-template-columns: 1fr; }
}
/* Points panel details: centred note, tight number/unit stack, lighter tile labels */
.earn--panel .earn-note { margin-top: 22px; text-align: center; }
.earn--panel .earn-play { padding-bottom: 20px; }
.earn--panel .earn-track strong {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    font-size: 20px;
    line-height: .95;
}
.earn--panel .earn-track strong span { margin-top: 0; line-height: 1; }
/* Baloo's tall ascent makes the number sit high; nudge the stack to the optical centre */
.earn--panel .earn-track strong { box-sizing: border-box; padding-top: 2px; }
.earn--panel .earn-track::before { top: 29px; }
.earn--panel .earn-tiles .earn-label { font-weight: 500; }
/* Let the points panel's columns shrink below their content width on small phones */
.points-panel > * { min-width: 0; }
@media (max-width: 420px) {
    .earn-card { padding: 12px 10px 14px; }
    .earn-card h3 { font-size: 18px; }
    .earn-tag { font-size: 11px; padding: 2px 8px; }
    .earn-track { gap: 0; }
    .earn-track::before { top: 21px; }
    .earn-track strong { width: 44px; height: 44px; font-size: 15px; border-width: 2px; }
    .earn--panel .earn-track strong { width: 44px; height: 44px; font-size: 15px; }
    .earn--panel .earn-track::before { top: 21px; }
    .earn--panel .earn-note { margin-top: 14px; }
    .earn-track strong span { font-size: 8px; }
    .earn-track .earn-label { font-size: 11px; }
    .earn-note { font-size: 12px; }
    .earn--panel .earn-gems .earn-tiles li {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .earn--panel .earn-tiles strong { font-size: 17px; }
}
/* Links inside FAQ answers */
.faq details p a {
    color: #00a2d8;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.faq details p a:hover { color: #0086b3; }

/* Terrawood referral welcome pack */
.terrawood-band { background:linear-gradient(135deg,#edf3df 0%,#f7f5e9 55%,#e9efdf 100%); border-block:1px solid #dde5ce; }
.terrawood-section { padding-block:90px; }
.terrawood-top { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.terrawood-copy .eyebrow,.terrawood-pack .eyebrow,.terrawood-benefits-heading .eyebrow { font-size:12px; letter-spacing:1.3px; }
.terrawood-copy h2 { margin:16px 0 24px; }
.terrawood-copy>p:not(.eyebrow) { color:var(--muted); margin-bottom:16px; }
.terrawood-copy .terrawood-intro { font-size:18px; color:var(--ink); }
.terrawood-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.terrawood-tags span { background:#e6f2d4; border:1px solid #8fa869; color:#426344; border-radius:100px; padding:6px 12px; font-size:12px; font-weight:800; }
.terrawood-pack { background:#fffdf5; border:1px solid #d9dfc8; border-radius:28px; padding:28px; box-shadow:0 16px 40px #46613710; }
.terrawood-pack-heading { display:flex; gap:16px; align-items:center; justify-content:space-between; margin-bottom:24px; }
.terrawood-pack-heading .eyebrow { font-size:9px; letter-spacing:1px; margin-bottom:8px; }
.terrawood-pack h3 { font-size:27px; }
.terrawood-free { border-radius:100px; padding:8px 12px; background:var(--lime); color:#385331; font-size:12px; font-weight:900; flex-shrink:0; }
.terrawood-items { padding:0; margin:0; list-style:none; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.terrawood-item { aspect-ratio:1; padding:7px; border:1px solid #dfd9bb; border-radius:13px; background:#f8f2df; }
.terrawood-item-space { display:block; width:100%; height:100%; border:1px dashed #d4c9a3; border-radius:8px; }
.terrawood-preview-note { text-align:center; color:var(--muted); font-size:11px; margin-top:12px; }
.terrawood-pack-note { text-align:center; margin-top:20px; padding-top:20px; border-top:1px solid #e8e6d8; color:var(--muted); font-size:15px; }
.terrawood-pack-note strong { color:var(--green); font-size:19px; }
.terrawood-benefits-heading { text-align:center; margin:64px 0 28px; }
.terrawood-benefits-heading h3 { font-size:30px; margin-top:12px; }
.terrawood-benefits { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.terrawood-benefits article { border:1px solid #dce4ca; border-radius:20px; padding:24px 22px; background:#f5f9eb; }
.terrawood-benefits article:nth-child(2) { background:#edf6f8; border-color:#d3e6e9; }
.terrawood-benefits article:nth-child(3) { background:#fff6dd; border-color:#ede0b6; }
.terrawood-benefits article:nth-child(4) { background:#f8eff3; border-color:#ead9e1; }
.terrawood-benefit-icon { width:54px; height:54px; display:grid; place-items:center; background:#ffffffa8; border-radius:16px; margin-bottom:20px; }
.terrawood-benefit-icon img { width:34px; height:34px; object-fit:contain; }
.terrawood-benefits h4 { font-family:inherit; font-size:18px; line-height:1.3; margin:0 0 12px; font-weight:900; }
.terrawood-benefits p { font-size:14px; line-height:1.7; color:#58695e; }
@media(max-width:1050px) { .terrawood-top { gap:30px; } .terrawood-benefits { grid-template-columns:repeat(2,minmax(0,1fr)); } .terrawood-pack { padding:22px; } .terrawood-pack h3 { font-size:23px; } }
@media(max-width:760px) { .terrawood-section { padding-block:60px; } .terrawood-top { grid-template-columns:1fr; gap:30px; } .terrawood-copy h2 { font-size:36px; } .terrawood-pack { max-width:540px; width:100%; margin-inline:auto; } .terrawood-benefits-heading { margin-top:40px; } .terrawood-benefits-heading h3 { font-size:27px; } }
@media(max-width:480px) { .terrawood-copy h2 { font-size:32px; } .terrawood-copy .terrawood-intro { font-size:16px; } .terrawood-copy .eyebrow { font-size:10px; } .terrawood-benefits { grid-template-columns:1fr; } .terrawood-benefits article { padding:22px; } .terrawood-benefit-icon { float:left; width:44px; height:44px; margin:0 14px 8px 0; } .terrawood-benefits h4 { min-height:44px; display:flex; align-items:center; } .terrawood-benefits p { clear:both; } .terrawood-pack { padding:18px 14px; border-radius:22px; } .terrawood-pack h3 { font-size:21px; } .terrawood-pack-heading { gap:8px; } .terrawood-items { gap:6px; } .terrawood-item { padding:4px; border-radius:9px; } .terrawood-pack-heading .eyebrow { font-size:8px; } }

/* Terrawood illustrated background */

.terrawood-band { background:#edf3df; position:relative; isolation:isolate; }
.terrawood-band::before { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(250,249,243,.94) 0%,rgba(250,249,243,.84) 38%,rgba(250,249,243,.24) 75%),linear-gradient(0deg,#edf3df 0%,rgba(237,243,223,.97) 12%,rgba(237,243,223,0) 64%); }
/* The room picture loads only once lazy-background.js marks the section as near the screen */
.terrawood-band.is-near::before { background:linear-gradient(90deg,rgba(250,249,243,.94) 0%,rgba(250,249,243,.84) 38%,rgba(250,249,243,.24) 75%),linear-gradient(0deg,#edf3df 0%,rgba(237,243,223,.97) 12%,rgba(237,243,223,0) 64%),url('assets/terrawood-room-background-v1.jpg') center top / cover no-repeat; }
.terrawood-pack { background:rgba(255,253,245,.95); box-shadow:0 16px 40px #30452c25; }
.terrawood-benefits article { box-shadow:0 4px 14px #30452c08; }
@media (max-width: 760px) {
    .terrawood-band::before {
        background: linear-gradient(180deg, rgba(250, 249, 243, .92), rgba(250, 249, 243, 0.8) 35%, #edf3df 70%);
    }
    .terrawood-band.is-near::before {
        background: linear-gradient(180deg, rgba(250, 249, 243, .92), rgba(250, 249, 243, 0.8) 35%, #edf3df 70%), url(assets/terrawood-room-background-v1.jpg) 97% top / auto 664px no-repeat;
    }
}

/* Supplied Terrawood pixel artwork and quantities */
.terrawood-item { position:relative; }
.terrawood-item-space { display:grid; place-items:center; }
.terrawood-item-image { display:block; width:auto; height:auto; max-width:78%; max-height:78%; object-fit:contain; }
.terrawood-item-quantity {
    position: absolute;
    top: -3px;
    right: -3px;
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #82a312;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0 0 2px #fffdf5;
}
@media(max-width:480px) { .terrawood-item-quantity { top:4px; right:4px; width:18px; height:18px; font-size:11px; box-shadow:0 0 0 1px #fffdf5; } }

/* Keep Terrawood's woodland palette independent of the page's blue theme. */
#terrawood {
    --green: #426b52;
    --ink: #253e39;
    --muted: #58695e;
    --lime: #dcef99;
    color: #253e39;
}
#terrawood .eyebrow,
#terrawood h2 em,
#terrawood .terrawood-pack-note strong {
    color: #64803a;
}
#terrawood h2,
#terrawood h3,
#terrawood h4 {
    color: #253e39;
}
#terrawood .terrawood-benefits article {
    border-width: 2px;
    background: #e6f2d4;
    border-color: #8fa869;
    box-shadow: 0 6px 18px #344b2910;
}
#terrawood .terrawood-benefits article:nth-child(2) {
    background: #d9eee3;
    border-color: #87ac98;
}
#terrawood .terrawood-benefits article:nth-child(3) {
    background: #f6e6b5;
    border-color: #ba9c53;
}
#terrawood .terrawood-benefits article:nth-child(4) {
    background: #ffdcc0;
    border-color: #c49a7a;
}
#terrawood .terrawood-benefits p {
    color: #465849;
}
/* Give percentage image limits a definite slot height on small screens. */
.terrawood-item-space {
    position: relative;
    min-width: 0;
    min-height: 0;
}
.terrawood-item-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 78%;
    max-height: 78%;
}
@media (max-width: 760px) {
    #terrawood .terrawood-tags {
        flex-direction: column;
        align-items: center;
    }
}
/* Centre section headings, and the eyebrow label directly above each, on mobile. Body copy keeps its own alignment. */
@media (max-width: 760px) {
    main h2,
    main .eyebrow:has(+ h2) {
        text-align: center;
    }
}