@font-face {
    font-family: Montserrat;
    src: url("../fonts/Montserrat-ExtraBold.ttf") format("truetype");
    /*font-weight: 500 700;*/
    font-weight: 700;
    font-display: swap;
    /*unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;*/
}
@font-face {
    font-family: Montserrat;
    src: url("../fonts/Montserrat-SemiBold.ttf") format("truetype");
    /*font-weight: 500 700;*/
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: Montserrat;
    src: url("../fonts/Montserrat-Medium.ttf") format("truetype");
    /*font-weight: 500 700;*/
    font-weight: 500;
    font-display: swap;
}

:root {
    --green: #008348;
    --red: #ec1d24;
    --ink: #2c2c2c;
    --muted: #818181;
    --surface: #f8f8f8;
    --white: #fff;
    --shadow: 0 4px 8px rgba(149, 118, 92, .05);
    --font-semibold: 600;
    --font-bold: 700;
    --font-medium: 400;
    --viewport-height: 100vh;
    --viewport-height: 100svh;
    --viewport-height: 100dvh;
    font-family: Montserrat, Arial, sans-serif;
    color: var(--ink);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html, body { width: 100%; min-height: var(--viewport-height); margin: 0; background: var(--surface); }
body { position: relative; display: grid; height: var(--viewport-height); place-items: center; overflow: hidden; background: var(--surface); }
.app-booting .app { opacity: 0; pointer-events: none; }
.app-booting *, .app-booting *::before, .app-booting *::after { animation: none !important; transition: none !important; }
.mobile-device, .mobile-device body, .mobile-device .app { touch-action: pan-y; -ms-touch-action: pan-y; }
button, input { font: inherit; }
button { border: 0; padding: 0; color: inherit; background: none; cursor: pointer; }
button:disabled { cursor: default; }
img { display: block; -webkit-user-drag: none; user-select: none; }
a { color: var(--green); text-underline-offset: 2px; }

.app {
    position: relative;
    z-index: 1;
    width: min(100vw, calc(var(--viewport-height) * .5625));
    height: var(--viewport-height);
    overflow: hidden;
    background: var(--surface);
    isolation: isolate;
}

.desktop-proportional {
    --app-scale: min(calc(var(--viewport-height) / 640px), calc(100vw / 360px));
}
.desktop-proportional .app {
    width: 360px;
    height: 640px;
    zoom: var(--app-scale, 1);
}

.screen {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    overflow: hidden;
    background: var(--surface);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 240ms ease, transform 320ms cubic-bezier(.22,1,.36,1), visibility 0s linear 320ms;
}
.screen.is-active { z-index: 1; opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }

.screen--rotate { position: fixed; z-index: 2147483647; inset: 0; width: 100vw; height: var(--viewport-height); place-items: center; background: var(--surface); }
.rotate-card { display: flex; width: 221px; height: 64px; align-items: center; justify-content: center; gap: 16px; padding: 24px; border-radius: 24px; background: var(--white); box-shadow: var(--shadow); }
.rotate-card h1 { margin: 0; white-space: nowrap; font-size: 14px; font-weight: 500; line-height: 16px; }
.rotate-card img { flex: 0 0 24px; }
.mobile-landscape .app > .screen:not(.screen--rotate),
.mobile-landscape body > .overlay,
.mobile-landscape body > .toast { opacity: 0; visibility: hidden; pointer-events: none; }
.mobile-landscape .app { width: 100vw; height: var(--viewport-height); transform: none; zoom: 1; }
.mobile-landscape .screen--rotate:not([hidden]) { display: grid; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.mobile-device {
    --mobile-scale: min(calc(100vw / 360px), calc(var(--viewport-height) / 640px));
    --mobile-layout-height: calc(var(--viewport-height) / var(--mobile-scale));
}
.mobile-device:not(.mobile-landscape) .app { width: 100vw; height: var(--viewport-height); }

.mobile-device:not(.mobile-landscape) .screen {
    inset: auto;
    top: 0;
    left: 50%;
    width: 360px;
    height: var(--mobile-layout-height, 640px);
    margin-left: -180px;
    transform-origin: top center;
}
.mobile-device:not(.mobile-landscape) .screen { transform: scale(var(--mobile-scale, 1)) translateY(6px); }
.mobile-device:not(.mobile-landscape) .screen.is-active { transform: scale(var(--mobile-scale, 1)); }
.mobile-device:not(.mobile-landscape) .overlay {
    inset: 0;
    width: 100vw;
    height: var(--viewport-height);
    transform: none;
}
.mobile-device:not(.mobile-landscape) .overlay .sheet {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 360px;
    margin-left: -180px;
    scale: var(--mobile-scale, 1);
    transform-origin: bottom center;
}
.mobile-device:not(.mobile-landscape) .toast {
    right: auto;
    bottom: calc(96px * var(--mobile-scale, 1));
    left: 50%;
    width: 312px;
    transform: translateX(-50%) scale(var(--mobile-scale, 1));
    transform-origin: bottom center;
}

.primary-button, .secondary-button {
    display: flex;
    width: 100%;
    height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
    font-size: 16px;
    font-weight: 600;
    line-height: 18px;
    /*letter-spacing: 1px;*/
    text-align: center;
    transition: transform 160ms ease, background-color 180ms ease, border-color 180ms ease, opacity 180ms ease;
}
.primary-button { color: var(--white); background: var(--green); }
.primary-button:disabled { background: #818181; }
.secondary-button { border: 1px solid var(--green); color: var(--green); }
.primary-button:focus-visible, .secondary-button:focus-visible, .back-button:focus-visible, .faq-item__button:focus-visible, .program-card__toggle:focus-visible, .program-card__detail:focus-visible { outline: 3px solid rgba(0,131,72,.3); outline-offset: 2px; }
.action-button { justify-content: space-between; padding: 0 20px; }
.action-button > :first-child, .action-button > :last-child { width: 20px; }
.action-button > b { font-weight: inherit; }
.primary-button:active:not(:disabled), .secondary-button:active:not(:disabled), .back-button:active { transform: scale(.98); }

.screen--loading { background: var(--surface); }
.loading-logo { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); }
.loading-status { position: absolute; right: 28px; bottom: 36px; left: 28px; text-align: center; }
.loading-status p { margin: 10px 0 0; font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: -.24px; }
.progress-bar { height: 24px; padding: 2px; overflow: hidden; border: 1px solid var(--green); border-radius: 32px; }
.progress-bar span { display: block; width: 0; height: 18px; border-radius: 32px; background: var(--green); transition: width 180ms ease; }

.screen--preloader { display: grid; place-items: center; }
.spinner { width: 80px; height: 80px; border: 1px solid rgba(0,131,72,.12); border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; }

.error-copy { position: absolute; top: 60px; right: 28px; left: 28px; }
.error-copy h1 { margin: 0 0 20px; color: var(--red); font-size: 20px; font-weight: var(--font-semibold); line-height: 22px; }
.error-copy p { margin: 0; font-size: 14px; font-weight: 500; line-height: 18px; letter-spacing: -.28px; }
.screen-actions { position: absolute; right: 28px; bottom: 28px; left: 28px; }
.screen-actions--double { display: grid; gap: 8px; }

.main-scroll { height: 100%; overflow: hidden auto; padding: 60px 28px 164px; scroll-padding-bottom: 164px; scrollbar-width: none; }
.main-scroll::-webkit-scrollbar, .list-screen::-webkit-scrollbar { display: none; }
.brand-header { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; }
.brand-header > img { justify-self: center; }
.header-spacer { width: 32px; height: 32px; }
.campaign-title { display: grid; min-height: 46px; margin: 16px 0; place-items: center; color: var(--red); font-size: 20px; font-weight: var(--font-semibold); line-height: 22px; text-align: center; }
.hero { position: relative; display: flex; min-height: 140px; align-items: center; overflow: hidden; }
.hero > div { position: relative; z-index: 1; min-width: 0; }
.hero h2 { width: 210px; margin: 0 0 16px; color: var(--green); font-size: 20px; font-weight: bold; line-height: 22px; white-space: pre-line; }
.hero p { width: 140px; margin: 0; font-size: 12px; line-height: 16px; letter-spacing: -.24px; font-weight: 500 }
.hero > img { position: absolute; top: 0; right: 0; width: min(112px, 100%); max-width: 100%; height: 140px; margin: 0; object-fit: contain; object-position: right center; }
.programs { display: grid; gap: 8px; margin-top: 16px; }
.program-card { --preview-bottom-offset: 16px; --program-card-radius: 18px; position: relative; height: 40px; overflow: visible; border: .5px solid transparent; border-radius: var(--program-card-radius); background: transparent; transition: height 420ms cubic-bezier(.22,1,.36,1), background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease; -webkit-tap-highlight-color: transparent; }
.program-card.is-open { height: 172px; overflow: hidden; padding-top: 0; border-color: var(--green); background: var(--surface); box-shadow: none; }
.program-card__toggle { position: relative; z-index: 1; display: grid; width: 100%; height: 40px; min-height: 40px; grid-template-columns: minmax(0, 1fr) 20px; gap: 8px; align-items: center; padding: 0 8px 0 68px; border: .5px solid var(--green); border-radius: 18px; background: var(--surface); text-align: center; transition: height 420ms cubic-bezier(.22,1,.36,1), padding 420ms cubic-bezier(.22,1,.36,1), border-color 180ms ease, border-radius 180ms ease, background-color 180ms ease; -webkit-tap-highlight-color: transparent; }
.program-card__preview { position: absolute; bottom: calc(-1 * var(--preview-bottom-offset)); left: 0; width: 60px; height: 60px; object-fit: contain; -webkit-clip-path: inset(0 0 var(--preview-bottom-offset) 0 round 0 0 0 var(--program-card-radius)); clip-path: inset(0 0 var(--preview-bottom-offset) 0 round 0 0 0 var(--program-card-radius)); transform-origin: left bottom; transition: opacity 180ms ease, transform 340ms cubic-bezier(.22,1,.36,1), visibility 0s linear; }
.program-card h3 { display: -webkit-box; max-height: 32px; overflow: hidden; margin: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12px; font-weight: var(--font-semibold); line-height: 16px; letter-spacing: -.24px; text-align: left; white-space: normal; }
.program-card__chevron { width: 20px; height: 20px; object-fit: contain; transition: transform 340ms cubic-bezier(.22,1,.36,1); }
.program-card.is-open .program-card__toggle { height: 48px; padding-right: 8px; padding-left: 36px; border-color: transparent; border-radius: 0; background: transparent; }
.program-card.is-open h3 { text-align: center; }
.program-card.is-title-opening h3 { animation: program-title-open 320ms cubic-bezier(.22,1,.36,1) both; }
.program-card.is-title-closing h3 { animation: program-title-close 320ms cubic-bezier(.22,1,.36,1) both; }
.program-card.is-open .program-card__preview { visibility: hidden; opacity: 0; transform: scale(.82); transition-delay: 0s, 0s, 180ms; }
.program-card.is-open .program-card__chevron { transform: rotate(180deg); }
.program-card__collapse { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 420ms cubic-bezier(.22,1,.36,1), opacity 220ms ease; }
.program-card.is-open .program-card__collapse { grid-template-rows: 1fr; opacity: 1; }
.program-card__body { min-height: 0; overflow: hidden; padding: 0 8px; transition: padding 420ms cubic-bezier(.22,1,.36,1); }
.program-card.is-open .program-card__body { padding-bottom: 15px; }
.milestones { position: relative; height: 108px; }
.milestones::after { position: absolute; bottom: 7px; left: 50%; width: var(--milestone-line-width, 240px); height: 1px; content: ""; background: var(--green); transform: translateX(-50%); }
.milestone { position: absolute; z-index: 1; top: 0; left: calc(50% + var(--milestone-offset, 0px)); display: grid; width: var(--milestone-item-width, 47px); height: 108px; justify-items: center; transform: translateX(-50%); }
.milestone small { position: absolute; z-index: 3; top: 0; left: 50%; display: inline-flex; align-items: center; justify-content: center; gap: 9.36px; padding: 3.74px; border-radius: 11.23px; color: white; background: #ec1d24; font-size: 8px; font-weight: 500; line-height: 10px; white-space: nowrap; transform: translateX(-50%); }
.milestone__product { position: absolute; top: 50%; left: 50%; width: 100%; max-width: 47px; height: 51px; object-fit: contain; transform: translate(-50%, -50%); }
.milestone__marker { position: absolute; z-index: 2; bottom: 0; left: 50%; width: min(16px, calc(100% - 2px)); height: auto; max-height: 16px; margin: 0; object-fit: contain; transform: translateX(-50%); }
.is-gift .milestone__marker {  width: min(22px, calc(100% - 2px)); height: auto; max-height: 26px; margin: 0; object-fit: contain; transform: translateX(-50%); }
.milestone__marker--complete { aspect-ratio: 1; padding: 2px; border-radius: 50%; background: var(--green); }
.milestone__marker--reward { bottom: -5px; width: 22px; height: 26px; }
.milestone.is-locked .milestone__product { filter: grayscale(1); opacity: .65; }
.milestone.is-locked .milestone__marker--reward { filter: grayscale(1); opacity: 1; }
.milestone.is-locked .milestone__marker--locked { filter: none; opacity: 1; }
.program-card__detail { position: absolute; z-index: 3; top: 14px; left: 8px; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; transition: background-color 180ms ease, transform 160ms ease; }
.program-card__detail:active { background: rgba(0,131,72,.06); transform: scale(.92); }
.program-card__detail-icon { width: 20px; height: 20px; object-fit: contain; }
.main-consents { display: grid; gap: 12px; margin-top: 24px; }
.agreement--accepted { cursor: default; }
.agreement--accepted a { cursor: pointer; }
.main-faq { margin-top: 28px; }
.main-faq > h2 { margin: 0; color: var(--green); font-size: 20px; font-weight: var(--font-semibold); line-height: 22px; text-align: center; }
.bottom-fade { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; height: 124px; pointer-events: none; background: linear-gradient(180deg, rgba(248,248,248,0), var(--surface) 24%); }
.bottom-button { position: absolute; z-index: 3; right: 28px; bottom: 28px; left: 28px; width: auto; }
.gift-icon { width: 20px; height: 20px; background-image: url("../images/app/icons/gift.png"); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; }

.list-screen { overflow: hidden auto; padding: 44px 24px 32px; }
.screen-header { display: grid; height: 32px; grid-template-columns: 32px 1fr 32px; align-items: center; }
.screen-header h1 { margin: 0; color: var(--green); font-size: 20px; font-weight: var(--font-semibold); line-height: 22px; text-align: center; }
.back-button { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 32px; transition: transform 160ms ease, background-color 180ms ease; }
.screen-caption { width: 266px; margin: 12px auto; font-size: 10px; line-height: 14px; text-align: center; }
.card-list { display: grid; gap: 16px; }
.prize-card { position: relative; display: grid; min-height: 158px; padding: 24px; border-radius: 32px; background: white; box-shadow: var(--shadow); }
.prize-card h2 { max-width: 190px; min-height: 36px; margin: 0 0 8px; font-size: 16px; font-weight: var(--font-semibold); line-height: 18px; }
.prize-card h2 em { color: var(--green); font-style: normal; }
.prize-card p { margin: 0 0 8px; font-size: 10px; line-height: 14px; }
.prize-card > img { position: absolute; top: 6px; right: 24px; width: 78px; height: 90px; object-fit: contain; }
.prize-card .primary-button { height: 32px; padding: 0 12px; background: var(--red); font-size: 12px; line-height: 14px; }
.prize-card .primary-button img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.empty-state { padding: 40px 20px; color: var(--muted); font-size: 14px; line-height: 20px; text-align: center; }

.faq-list { display: grid; gap: 12px; margin-top: 56px; }
.faq-list--main { margin-top: 16px; }
.faq-item { overflow: hidden; border-radius: 16px; background: white; box-shadow: var(--shadow); -webkit-tap-highlight-color: transparent; }
.faq-item__button { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: space-between; padding: 12px; text-align: left; -webkit-tap-highlight-color: transparent; }
.faq-item__button span { font-size: 12px; font-weight: 600; line-height: 20px; letter-spacing: -.24px; }
.faq-item__button img { width: 12px; height: 12px; transition: transform 320ms cubic-bezier(.22,1,.36,1); }
.faq-item__answer { max-height: 0; padding: 0 12px; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 14px; transition: max-height 320ms cubic-bezier(.22,1,.36,1), padding 320ms cubic-bezier(.22,1,.36,1); }
.faq-item.is-open .faq-item__answer { max-height: 240px; padding: 0 12px 12px; }
.faq-item.is-open .faq-item__button img { transform: rotate(180deg); }
.faq-item__answer p { margin: 0; }

.overlay { position: fixed; z-index: 10; inset: 0; display: flex; width: 100vw; height: var(--viewport-height); align-items: flex-end; background: rgba(18,19,21,.7); animation: overlay-in 260ms ease both; }
.overlay.is-closing { animation: overlay-out 260ms ease both; pointer-events: none; }
.sheet { position: relative; width: 100%; padding: 28px; border-radius: 40px 40px 0 0; background: white; animation: sheet-in 360ms cubic-bezier(.22,1,.36,1) both; }
.overlay.is-closing .sheet { animation: sheet-out 260ms ease both; }
.sheet h2 { margin: 0 0 28px; color: var(--red); font-size: 20px; font-weight: var(--font-bold); line-height: 22px; }
.sheet p { margin: 0 0 18px; font-size: 14px; font-weight: 500; line-height: 18px; letter-spacing: -.28px; }
/*.sheet p span{font-size: 12px; font-weight: 500; line-height: 20px;}*/
.sheet--onboarding form { display: grid; gap: 12px; margin-top: 26px; }
.sheet--onboarding .primary-button { margin-top: 16px; }
.sheet--program { min-height: 252px; }
.program-detail__head { position: relative; display: flex; min-height: 60px; align-items: center; padding-left: 100px; }
.program-detail__head > img { position: absolute; /*top: -31px;*/ left: 2px; width: 90px; height: 90px; object-fit: contain; }
.sheet .program-detail__head h2 { width: 204px; margin: 0; color: var(--ink); font-size: 16px; line-height: 18px; }
.sheet .program-detail__description { margin: 28px 0 24px; white-space: pre-line; }
.sheet .program-detail__description.has-leading-bullet { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: .45em; align-items: start; }
.program-detail__description-marker { grid-column: 1; }
.program-detail__description-text { display: grid; min-width: 0; gap: 12px; }
.has-leading-bullet > .program-detail__description-text { grid-column: 2; }
.program-detail__description-secondary { font-size: 12px; line-height: 16px; }
.program-detail__rules { display: grid; gap: 12px; margin: 0 0 24px; }
.sheet--program > .primary-button { margin-top: 4px; }
.agreement { display: grid; min-height: 24px; grid-template-columns: 24px 1fr; gap: 16px; align-items: center; font-size: 12px; line-height: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.agreement * { -webkit-tap-highlight-color: transparent; }
.agreement input { position: absolute; opacity: 0; }
.agreement i { position: relative; width: 24px; height: 24px; border: 1px solid var(--green); border-radius: 8px; }
.agreement input:checked + i { background: var(--green); }
.agreement input:checked + i::after { position: absolute; top: 1px; left: 1px; width: 20px; height: 20px; content: ""; background: url("../images/app/icons/checkmark.png") center / 20px 20px no-repeat; pointer-events: none; }
.agreement input:focus-visible + i { outline: 3px solid rgba(0,131,72,.3); outline-offset: 2px; }
.sheet--reward { min-height: 250px; }
.reward-back { margin: -4px 0 12px; }
.sheet--reward h2 { margin-bottom: 20px; }
.sheet--reward > p { width: 190px; margin-bottom: 24px; }
.reward-image { position: absolute; top: 60px; right: 28px; width: 78px; height: 98px; object-fit: contain; }
.sheet--reward .primary-button { margin-top: 22px; }
.toast { position: fixed; z-index: 20; right: 24px; bottom: 96px; left: 24px; padding: 12px 16px; border-radius: 16px; color: white; background: rgba(44,44,44,.92); font-size: 12px; line-height: 16px; text-align: center; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes overlay-in { from { opacity: 0; } }
@keyframes overlay-out { to { opacity: 0; } }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }
@keyframes program-title-open {
    0% { opacity: 1; text-align: left; transform: translateX(0); }
    45% { opacity: 0; text-align: left; transform: translateX(-4px); }
    55% { opacity: 0; text-align: center; transform: translateX(4px); }
    100% { opacity: 1; text-align: center; transform: translateX(0); }
}
@keyframes program-title-close {
    0% { opacity: 1; text-align: center; transform: translateX(0); }
    45% { opacity: 0; text-align: center; transform: translateX(4px); }
    55% { opacity: 0; text-align: left; transform: translateX(-4px); }
    100% { opacity: 1; text-align: left; transform: translateX(0); }
}

.desktop-proportional .main-scroll,
.desktop-proportional .list-screen { /*scrollbar-width: thin; scrollbar-color: var(--green) transparent;*/ }
.desktop-proportional .overlay .sheet {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 360px;
    margin-left: -180px;
    scale: min(
        var(--sheet-preferred-scale, 1),
        calc(100vw / var(--sheet-natural-width, 360px)),
        calc(var(--viewport-height) / var(--sheet-natural-height, 640px))
    );
    transform-origin: bottom center;
}
.desktop-proportional .toast { right: auto; bottom: calc(96px * var(--app-scale, 1)); left: 50%; width: 312px; transform: translateX(-50%) scale(var(--app-scale, 1)); transform-origin: bottom center; }
.desktop-proportional .main-scroll::-webkit-scrollbar,
.desktop-proportional .list-screen::-webkit-scrollbar { display: block; width: 4px; }
.desktop-proportional .main-scroll::-webkit-scrollbar-track,
.desktop-proportional .list-screen::-webkit-scrollbar-track { background: transparent; }
.desktop-proportional .main-scroll::-webkit-scrollbar-thumb,
.desktop-proportional .list-screen::-webkit-scrollbar-thumb { border-radius: 4px; background: var(--green); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}