/* Snack Pile Match — one responsive visual system for every storefront view. */
@layer reset, base, shell, home, commerce, account, auth, legal, responsive;
@layer reset {
  *,*::before,*::after {
    box-sizing:border-box
  }
  body,h1,h2,h3,h4,p,figure,ul,ol,dl,dd {
    margin:0
  }
  button,input,select,textarea {
    font:inherit
  }
  button,a,input,select,textarea {
    -webkit-tap-highlight-color:transparent
  }
  img {
    display:block;
    max-width:100%;
    height:auto
  }
  button {
    cursor:pointer
  }
  a {
    color:inherit;
    text-decoration:none
  }
  ul,ol {
    padding-left:1.3em
  }
  [hidden] {
    display:none!important
  }
  button:disabled {
    cursor:not-allowed;
    opacity:.5
  }
  table {
    border-collapse:collapse;
    width:100%
  }
  button {
    color:inherit
  }
}
@layer base {
  :root {
    --cream:#fff9ee;
    --paper:#fffdf8;
    --ink:#34213f;
    --muted:#756b79;
    --purple:#7542ac;
    --deep:#4e267c;
    --pink:#f4b3d0;
    --yellow:#f4ce69;
    --line:#e9dfd5;
    --green:#286547;
    --red:#a62f51;
    --radius:22px;
    --account-danger:var(--red);
    --account-success:var(--green);
    --account-accent:var(--purple);
    --account-text:var(--ink)
  }
  html {
    scroll-behavior:smooth;
    scroll-padding-top:110px
  }
  body {
    background:var(--cream);
    color:var(--ink);
    font-family:'Trebuchet MS','Segoe UI',Arial,sans-serif;
    font-size:16px;
    line-height:1.65;
    overflow-wrap:break-word
  }
  h1,h2,h3,h4 {
    font-weight:800;
    line-height:1.12;
    letter-spacing:-.045em
  }
  h1 {
    font-size:clamp(2.3rem,4.8vw,4.6rem)
  }
  h2 {
    font-size:clamp(1.85rem,3.3vw,3.2rem)
  }
  h3 {
    font-size:1.35rem
  }
  em {
    font-family:Georgia,serif;
    font-weight:500;
    color:var(--purple)
  }
  p {
    color:var(--muted)
  }
  button {
    border:0
  }
  input,select,textarea {
    max-width:100%;
    border:1px solid #cabacc;
    border-radius:12px;
    padding:13px 15px;
    background:var(--paper);
    color:var(--ink);
    min-width:0
  }
  input[type=checkbox],input[type=radio] {
    accent-color:var(--purple);
    width:19px;
    height:19px;
    flex-shrink:0
  }
  input::placeholder {
    color:#8a7c8e
  }
  input:focus,select:focus,textarea:focus {
    outline:3px solid #d9c8ed;
    border-color:var(--purple)
  }
  :focus-visible {
    outline:3px solid var(--purple);
    outline-offset:5px
  }
  a,button {
    touch-action:manipulation
  }
  a:hover {
    color:var(--purple)
  }
  button,a {
    transition:background .18s,color .18s,transform .18s,box-shadow .18s
  }
  .container {
    width:min(1200px,calc(100% - 80px));
    margin-inline:auto
  }
  .eyebrow {
    font-size:.74rem;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--purple);
    margin-bottom:22px
  }
  .button,.account-button,.auth-submit,.checkout-submit,.payment-submit,.activity-buy,.shop-custom-pack__submit,.payment-result-action,.system-message__action {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    min-height:52px;
    padding:14px 24px;
    border-radius:13px;
    background:var(--purple);
    color:#fff;
    font-size:.83rem;
    line-height:1.4;
    font-weight:800;
    letter-spacing:.025em;
    box-shadow:0 4px 0 var(--deep)
  }
  .button:hover,.account-button:hover,.auth-submit:hover,.checkout-submit:hover,.payment-submit:hover,.activity-buy:hover {
    background:var(--deep);
    color:white;
    transform:translateY(-2px)
  }
  .button-small {
    min-height:42px;
    padding:10px 18px
  }
  .button-light {
    background:var(--cream);
    color:var(--deep);
    box-shadow:0 4px 0 #c9aadd
  }
  .text-link,.account-text-link {
    font-size:.82rem;
    font-weight:800;
    color:var(--deep);
    text-decoration:underline;
    text-underline-offset:5px
  }
  .is-error,[aria-invalid=true],.auth-field__error,.auth-status,.checkout-status,.payment-form-status {
    color:var(--red)
  }
  .is-success {
    color:var(--green)
  }
  .skip-link {
    position:fixed;
    top:-100px;
    left:20px;
    z-index:1000;
    background:white;
    padding:12px
  }
  .skip-link:focus {
    top:15px
  }
  .fa {
    display:inline-block;
    font-style:normal;
    line-height:1
  }
  .fa::before {
    content:'✦'
  }
  .fa-user::before {
    content:'☺'
  }
  .fa-check::before {
    content:'✓'
  }
  .fa-arrow-right::before,.fa-angle-right::before {
    content:'→'
  }
  .fa-arrow-left::before {
    content:'←'
  }
  .fa-times::before {
    content:'×'
  }
  .fa-envelope-o::before {
    content:'✉'
  }
  .fa-lock::before {
    content:'▣'
  }
  .fa-refresh::before {
    content:'↻'
  }
  .fa-credit-card::before {
    content:'▤'
  }
  .fa-exclamation::before,.fa-exclamation-triangle::before {
    content:'!'
  }
  .fa-play::before {
    content:'▶'
  }
  .fa-clock-o::before {
    content:'◷'
  }
}
@layer shell {
  .site-header {
    position:sticky;
    top:0;
    z-index:40;
    background:#fff9eef5;
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(14px)
  }
  .nav {
    display:flex;
    align-items:center;
    gap:38px;
    min-height:94px
  }
  .brand {
    display:inline-flex;
    align-items:center;
    gap:11px;
    flex-shrink:0
  }
  .brand img {
    width:48px;
    height:48px
  }
  .brand>span {
    font-size:20px;
    font-weight:900;
    letter-spacing:-.055em;
    line-height:1.02
  }
  .brand small {
    display:block;
    color:var(--purple);
    font-size:23px
  }
  .nav-links {
    display:flex;
    align-items:center;
    gap:26px;
    margin-left:auto
  }
  .nav-link {
    font-size:13px;
    font-weight:700;
    white-space:nowrap
  }
  .nav-link.active {
    color:var(--purple);
    text-decoration:underline;
    text-underline-offset:7px
  }
  .header-actions {
    display:flex;
    align-items:center;
    gap:18px
  }
  .login-link {
    font-size:13px;
    font-weight:700
  }
  .account-link {
    display:flex;
    gap:8px;
    align-items:center;
    font-size:13px;
    font-weight:700
  }
  .account-avatar {
    width:34px;
    height:34px;
    display:inline-grid;
    place-items:center;
    background:#f0e4fa;
    border-radius:50%;
    font-size:22px;
    color:var(--purple)
  }
  .nav-toggle {
    display:none;
    background:none;
    padding:8px
  }
  .nav-toggle span,.account-nav-toggle span {
    display:block;
    width:22px;
    height:2px;
    background:var(--ink);
    margin:5px
  }
  .site-footer {
    background:#f2ebdf;
    border-top:1px solid var(--line);
    padding-top:58px
  }
  .footer-main {
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1.2fr;
    gap:42px;
    padding-bottom:46px
  }
  .footer-brand p {
    font-size:21px;
    line-height:1.4;
    margin-top:22px;
    letter-spacing:-.035em
  }
  .footer-block {
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:flex-start;
    font-size:13px;
    overflow-wrap:anywhere
  }
  .footer-block h2 {
    font-size:15px;
    letter-spacing:0;
    margin:7px 0 12px
  }
  .footer-block p,.footer-block small {
    font-size:12px
  }
  .footer-bottom {
    border-top:1px solid #dbd0c1;
    padding:22px 0;
    display:flex;
    justify-content:space-between;
    gap:24px;
    font-size:11px;
    color:var(--muted)
  }
  .snack-toast {
    position:fixed;
    bottom:28px;
    left:50%;
    transform:translateX(-50%);
    background:var(--ink);
    color:#fff;
    padding:14px 24px;
    border-radius:14px;
    box-shadow:0 10px 35px #34213f30;
    z-index:200;
    max-width:calc(100% - 32px);
    text-align:center
  }
  .snack-policy {
    border:0;
    border-radius:22px;
    background:var(--paper);
    color:var(--ink);
    padding:22px;
    width:min(960px,94vw);
    max-height:90dvh
  }
  .snack-policy::backdrop {
    background:#23182dbb
  }
  .snack-policy header,.snack-policy footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px
  }
  .snack-policy h2 {
    font-size:22px
  }
  .snack-policy iframe {
    width:100%;
    height:60dvh;
    border:1px solid var(--line);
    border-radius:12px;
    margin:18px 0
  }
  .snack-policy button {
    padding:10px 18px;
    border-radius:10px;
    background:var(--purple);
    color:white
  }
}
@layer home {
  .section {
    padding:100px 0
  }
  .snack-hero {
    padding:76px 0 82px;
    overflow:hidden
  }
  .snack-hero-grid {
    display:grid;
    grid-template-columns:.95fr 1.1fr;
    gap:66px;
    align-items:center
  }
  .hero-copy h1 {
    font-size:clamp(3.8rem,6.1vw,6rem);
    line-height:.99;
    letter-spacing:-.065em
  }
  .hero-copy h1 em {
    line-height:1.12
  }
  .hero-description {
    font-size:17px;
    margin:28px 0;
    line-height:1.7
  }
  .hero-actions {
    display:flex;
    gap:26px;
    align-items:center;
    flex-wrap:wrap
  }
  .hero-note {
    display:flex;
    align-items:center;
    gap:14px;
    font-size:11px;
    color:var(--muted);
    margin-top:30px
  }
  .mini-donuts {
    font-size:23px;
    letter-spacing:-6px;
    color:#c0548c;
    text-shadow:2px 2px #f4b3d0;
    padding-right:5px
  }
  .spark {
    color:#d38a39;
    margin-right:7px
  }
  .hero-art {
    position:relative;
    padding:18px 18px 0;
    background:#e7d8f2;
    border:1px solid #c5addc;
    border-radius:110px 110px 26px 26px;
    transform:rotate(2deg);
    box-shadow:0 20px 0 #ede2d0
  }
  .art-topline {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 17px 19px;
    font-size:10px;
    letter-spacing:.17em;
    font-weight:800;
    color:var(--deep)
  }
  .art-topline span:last-child {
    font-size:38px
  }
  .hero-art>img {
    aspect-ratio:1.15;
    object-fit:cover;
    object-position:center;
    border-radius:80px 80px 12px 12px
  }
  .art-caption {
    padding:18px 10px;
    display:flex;
    justify-content:space-between;
    font-size:11px;
    font-weight:700;
    color:var(--deep)
  }
  .art-caption span:last-child {
    color:#b87532
  }
  .level-sticker {
    position:absolute;
    left:-35px;
    bottom:67px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:17px 22px;
    background:var(--yellow);
    border:2px solid #fff3ce;
    box-shadow:0 5px 0 #bc8d36;
    border-radius:18px;
    transform:rotate(-9deg)
  }
  .level-sticker strong {
    font-size:49px;
    line-height:1;
    font-weight:900;
    letter-spacing:-.07em
  }
  .level-sticker span {
    font-size:11px;
    line-height:1.4;
    font-weight:800
  }
  .snack-ribbon {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:46px;
    padding:19px 20px;
    background:var(--pink);
    border-block:1px solid #dc99b8;
    color:#6d3452;
    font-size:12px;
    font-weight:900;
    letter-spacing:.13em;
    overflow:hidden;
    white-space:nowrap
  }
  .snack-ribbon>span:nth-child(even) {
    font-size:22px
  }
  .section-heading {
    display:grid;
    grid-template-columns:1fr .72fr;
    gap:100px;
    align-items:end;
    margin-bottom:48px
  }
  .section-heading>p {
    font-size:16px;
    max-width:440px
  }
  .section-heading h2 {
    font-size:clamp(2.1rem,3.6vw,3.5rem)
  }
  .how-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
    border:1px solid var(--line);
    border-radius:24px;
    overflow:hidden;
    background:var(--paper)
  }
  .how-grid article {
    padding:30px 34px 36px;
    position:relative
  }
  .how-grid article+article {
    border-left:1px solid var(--line)
  }
  .step-number {
    font-size:11px;
    letter-spacing:.12em;
    color:var(--muted)
  }
  .step-symbol {
    font-size:52px;
    color:var(--purple);
    height:90px;
    display:flex;
    align-items:center
  }
  .match-symbol {
    font-size:32px;
    color:#d56c9b;
    letter-spacing:5px
  }
  .how-grid h3 {
    margin-bottom:16px;
    font-size:23px
  }
  .how-grid p {
    font-size:14px
  }
  .feature-section {
    background:#f0e7f7;
    border-block:1px solid #e1d3ed
  }
  .feature-layout {
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:85px;
    align-items:center
  }
  .feature-art {
    padding:20px;
    background:#fff5df;
    border-radius:24px;
    transform:rotate(-3deg);
    box-shadow:0 10px 0 #d9c3e9
  }
  .feature-art img {
    aspect-ratio:1.1;
    object-fit:cover;
    border-radius:14px
  }
  .image-label {
    display:block;
    padding:20px 0 4px;
    text-align:center;
    letter-spacing:.14em;
    font-size:10px;
    font-weight:800
  }
  .feature-copy h2 {
    font-size:clamp(2.3rem,3.8vw,3.7rem)
  }
  .feature-list {
    padding:0;
    list-style:none;
    margin-top:26px
  }
  .feature-list li {
    position:relative;
    font-size:14px;
    padding:13px 0 13px 30px;
    border-bottom:1px solid #dbcae7
  }
  .feature-list li::before {
    content:'✦';
    position:absolute;
    left:0;
    color:var(--purple)
  }
  .snack-gallery {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px
  }
  .snack-gallery figure {
    padding:22px 22px 0;
    background:#eddfef;
    border:1px solid #dcc9e0;
    border-radius:24px
  }
  .snack-gallery figure:nth-child(2) {
    background:#f6e2c1;
    border-color:#e8d0a8;
    transform:translateY(24px)
  }
  .snack-gallery figure:nth-child(3) {
    background:#dde8d7;
    border-color:#c8dac1
  }
  .snack-gallery img {
    max-height:430px;
    width:100%;
    object-fit:contain;
    filter:drop-shadow(0 12px 10px #34213f22);
    border-radius:14px
  }
  .snack-gallery figcaption {
    padding:24px 0;
    font-size:14px;
    font-weight:800;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    justify-content:space-between
  }
  .snack-gallery figcaption span {
    font-size:9px;
    letter-spacing:.08em;
    font-weight:400
  }
  .rewards-teaser {
    background:var(--deep);
    color:white;
    padding:56px 0
  }
  .rewards-inner {
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:66px;
    align-items:center
  }
  .rewards-inner img {
    aspect-ratio:1.7;
    object-fit:cover;
    border-radius:24px;
    transform:rotate(-2deg)
  }
  .rewards-inner h2 {
    font-size:clamp(2rem,3.5vw,3.4rem)
  }
  .rewards-inner p {
    color:#e4d4f0;
    margin-bottom:23px
  }
  .rewards-inner .eyebrow {
    color:var(--pink)
  }
  .rewards-inner h2+p {
    margin:20px 0 27px;
    font-size:14px
  }
  .final-section {
    text-align:center;
    background:radial-gradient(ellipse at center,#f7e6ec 0,transparent 65%)
  }
  .final-section h2 {
    font-size:clamp(2.1rem,4vw,3.8rem)
  }
  .final-section h2+p {
    margin:20px 0 28px
  }
}
@layer commerce {
  .shop-main,.activity-main,.checkout-main,.payment-main,.payment-result-main,.system-message-main {
    min-height:60vh
  }
  .shop-banner {
    position:relative;
    background:var(--deep);
    color:white;
    isolation:isolate;
    overflow:hidden
  }
  .shop-banner>img {
    position:absolute;
    inset:0;
    z-index:-2;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:80% 52%
  }
  .shop-banner__overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#321441ee 10%,#321441b0 45%,#32144115);
    z-index:-1
  }
  .shop-banner__content {
    padding-block:80px
  }
  .shop-banner__content>p {
    font-size:12px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#f7c4da
  }
  .shop-banner h1 {
    font-size:clamp(2.7rem,5vw,4.4rem);
    margin:14px 0 20px
  }
  .shop-banner__content>span {
    display:block;
    max-width:480px;
    font-size:15px;
    color:#f0e7f7
  }
  .shop-market,.activity-market {
    padding:48px 0 80px
  }
  .shop-category-bar,.activity-tags {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    padding-bottom:28px
  }
  .shop-category,.activity-tag {
    padding:10px 20px;
    background:var(--paper);
    border:1px solid #d9c8df;
    color:var(--deep);
    border-radius:999px;
    font-size:13px;
    font-weight:700
  }
  .shop-category span {
    margin-left:8px;
    font-size:11px
  }
  .shop-category.is-active,.activity-tag.is-active {
    background:var(--purple);
    color:#fff;
    border-color:var(--purple)
  }
  .shop-layout {
    display:grid;
    grid-template-columns:1fr 260px;
    gap:30px
  }
  .shop-catalog__heading,.activity-toolbar {
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:center;
    margin-bottom:28px
  }
  .shop-catalog__heading p,.activity-toolbar p {
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--purple);
    margin-bottom:9px
  }
  .shop-catalog__heading h2,.activity-toolbar h2 {
    font-size:26px
  }
  .shop-catalog__heading>span,.activity-toolbar>span {
    font-size:12px;
    color:var(--muted)
  }
  .shop-product-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px
  }
  .shop-product-card {
    padding:0;
    text-align:left;
    border:1px solid var(--line);
    border-radius:20px;
    background:var(--paper);
    overflow:hidden;
    box-shadow:0 5px 0 #eee3d4
  }
  .shop-product-card:hover:not(:disabled) {
    transform:translateY(-5px);
    border-color:#b99acf;
    box-shadow:0 10px 0 #eee3d4
  }
  .shop-product-card__visual {
    display:grid;
    place-items:center;
    background:#f2e7f7;
    min-height:155px;
    padding:20px
  }
  .shop-product-card:nth-child(3n+2) .shop-product-card__visual {
    background:#fff0d6
  }
  .shop-product-card:nth-child(3n) .shop-product-card__visual {
    background:#fbe4eb
  }
  .shop-product-card__visual img {
    width:115px;
    height:115px;
    object-fit:contain
  }
  .shop-product-card__body {
    display:block;
    padding:20px
  }
  .shop-product-card__category {
    display:block;
    font-size:10px;
    text-transform:uppercase;
    color:var(--purple);
    letter-spacing:.1em;
    margin-bottom:7px
  }
  .shop-product-card__body>strong {
    display:block;
    font-size:17px;
    line-height:1.35
  }
  .shop-product-card__meta {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    margin-top:18px
  }
  .shop-product-card__meta b {
    font-size:19px;
    color:var(--purple)
  }
  .shop-product-card__meta small {
    font-size:10px;
    color:var(--muted)
  }
  .shop-sidebar,.shop-aside {
    padding:25px;
    border-radius:20px;
    background:#f0e5f7;
    border:1px solid #ddcbe8;
    align-self:start
  }
  .shop-sidebar h2,.shop-sidebar h3 {
    font-size:21px;
    margin-bottom:18px
  }
  .shop-sidebar p,.shop-sidebar li {
    font-size:13px;
    margin-bottom:12px
  }
  .shop-empty,.activity-empty {
    padding:50px 25px;
    text-align:center;
    border:1px dashed #cdb7d9;
    border-radius:20px;
    grid-column:1/-1
  }
  .shop-empty strong,.activity-empty strong {
    display:block;
    margin-bottom:8px
  }
  .shop-empty span,.activity-empty span {
    color:var(--muted);
    font-size:14px
  }
  .shop-custom-pack {
    display:grid;
    grid-template-columns:1fr 1fr;
    margin-top:32px;
    background:#f2e8f8;
    border:1px solid #dcc8e8;
    border-radius:22px;
    overflow:hidden
  }
  .shop-custom-pack__copy,.shop-custom-pack__checkout {
    padding:28px
  }
  .shop-custom-pack__copy h3 {
    font-size:27px;
    margin:12px 0 17px
  }
  .shop-custom-pack__copy>p {
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--purple)
  }
  .shop-custom-pack__copy>span {
    font-size:13px;
    color:var(--muted)
  }
  .shop-custom-pack__formula {
    margin-top:24px;
    display:flex;
    gap:24px
  }
  .shop-custom-pack__formula dt {
    font-size:11px
  }
  .shop-custom-pack__formula dd {
    font-size:23px;
    font-weight:800
  }
  .shop-custom-pack__checkout {
    background:#fffaf1
  }
  .shop-custom-pack__checkout>label {
    font-size:11px;
    font-weight:800;
    letter-spacing:.1em
  }
  .shop-custom-pack__input {
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:10px
  }
  .shop-custom-pack__input input {
    width:100%
  }
  .shop-custom-pack__checkout>p {
    font-size:11px;
    margin-top:10px
  }
  .shop-custom-pack__total {
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:center;
    margin:23px 0
  }
  .shop-custom-pack__total>span {
    font-size:10px;
    font-weight:800
  }
  .shop-custom-pack__total strong {
    font-size:27px;
    color:var(--purple)
  }
  .shop-custom-pack__total small {
    font-size:11px
  }
  .shop-custom-pack__submit {
    width:100%;
    font-size:12px
  }
  .shop-direct-order {
    display:none
  }
  .activity-hero {
    background:linear-gradient(90deg,#f0e2f5 30%,#fff9ee88),url('/public/upload/banner/20261114/3f53f4519725cd41735e3c7693eb3cf6.jpg') right center/cover
  }
  .activity-hero__inner {
    padding-block:70px
  }
  .activity-hero__copy {
    max-width:600px
  }
  .activity-hero__copy>p {
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.15em;
    color:var(--purple)
  }
  .activity-hero h1 {
    margin:15px 0 20px;
    font-size:clamp(2.5rem,4vw,3.8rem)
  }
  .activity-hero__copy>span {
    font-size:15px;
    color:var(--muted)
  }
  .activity-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:26px
  }
  .activity-card {
    border:1px solid var(--line);
    border-radius:22px;
    overflow:hidden;
    background:var(--paper)
  }
  .activity-card__image {
    display:block;
    position:relative;
    background:#efe1f6
  }
  .activity-card__image img {
    width:100%;
    height:210px;
    object-fit:cover
  }
  .activity-card__image>span {
    position:absolute;
    left:16px;
    bottom:16px;
    background:var(--cream);
    color:var(--deep);
    padding:5px 12px;
    border-radius:99px;
    font-size:11px
  }
  .activity-card__body {
    padding:25px
  }
  .activity-card__meta {
    display:flex;
    justify-content:space-between;
    gap:12px;
    font-size:11px;
    color:var(--purple);
    margin-bottom:15px
  }
  .activity-card__meta small {
    font-size:10px;
    color:var(--muted)
  }
  .activity-card__body p {
    font-size:13px;
    margin-top:14px
  }
  .activity-card__price {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin:22px 0
  }
  .activity-card__price strong {
    font-size:25px;
    color:var(--purple)
  }
  .activity-card__price del,.activity-card__price small {
    font-size:11px;
    color:var(--muted)
  }
  .activity-card__saving {
    display:block
  }
  .activity-buy {
    width:100%
  }
  .activity-pagination {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:24px;
    margin-top:35px;
    font-size:12px
  }
  .is-disabled {
    opacity:.5;
    pointer-events:none
  }
  .checkout-container,.payment-container,.payment-result-container,.system-message-container {
    padding-block:36px 70px
  }
  .checkout-breadcrumb,.payment-breadcrumb,.payment-result-breadcrumb {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    font-size:11px;
    color:var(--muted);
    margin-bottom:32px
  }
  .checkout-heading,.payment-heading {
    margin-bottom:32px
  }
  .checkout-heading>p,.payment-heading>p {
    font-size:11px;
    color:var(--purple);
    letter-spacing:.12em;
    text-transform:uppercase;
    margin-bottom:12px
  }
  .checkout-heading h1,.payment-heading h1 {
    font-size:clamp(2rem,3.5vw,3.2rem)
  }
  .checkout-layout,.payment-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:30px;
    align-items:start
  }
  .checkout-content,.payment-content {
    display:grid;
    gap:24px
  }
  .checkout-panel,.checkout-game-id,.checkout-delivery,.checkout-summary,.payment-panel,.payment-summary,.payment-success-order,.payment-success-game,.payment-result-card {
    border:1px solid var(--line);
    border-radius:22px;
    background:var(--paper);
    overflow:hidden
  }
  .checkout-panel__heading,.checkout-game-id__heading,.checkout-summary__heading,.payment-panel__heading,.payment-summary__heading {
    padding:24px 26px;
    border-bottom:1px solid var(--line);
    display:flex;
    gap:16px;
    align-items:center;
    justify-content:space-between
  }
  .checkout-panel__heading p,.checkout-game-id__heading p,.checkout-summary__heading p,.payment-panel__heading p,.payment-summary__heading p {
    font-size:10px;
    color:var(--purple);
    letter-spacing:.12em;
    text-transform:uppercase;
    margin-bottom:8px
  }
  .checkout-panel h2,.checkout-game-id h2,.checkout-delivery h2,.checkout-summary h2,.payment-panel h2,.payment-summary h2 {
    font-size:21px;
    letter-spacing:-.03em
  }
  .checkout-panel__heading>span {
    font-size:11px;
    color:var(--muted)
  }
  .checkout-table__head {
    display:grid;
    grid-template-columns:2.5fr 1fr .7fr 1fr;
    font-size:10px;
    background:#f7f0e5;
    padding:12px 26px
  }
  .checkout-item {
    display:grid;
    grid-template-columns:2.5fr 1fr .7fr 1fr;
    align-items:center;
    gap:10px;
    padding:25px
  }
  .checkout-item+.checkout-item {
    border-top:1px solid var(--line)
  }
  .checkout-item__product {
    display:flex;
    gap:14px;
    align-items:center;
    min-width:0
  }
  .checkout-item__image {
    padding:10px;
    border-radius:14px;
    background:#f1e3f6;
    flex-shrink:0
  }
  .checkout-item__image img {
    width:65px;
    height:65px;
    object-fit:contain
  }
  .checkout-item__product strong,.checkout-item__product span,.checkout-item__product small {
    display:block
  }
  .checkout-item__product span,.checkout-item__product small {
    font-size:10px;
    color:var(--muted)
  }
  .checkout-item__product strong {
    font-size:14px;
    line-height:1.4;
    margin-block:5px
  }
  .checkout-item__value {
    font-size:12px
  }
  .checkout-game-id__field {
    padding:24px 26px
  }
  .checkout-game-id__field label {
    display:flex;
    justify-content:space-between;
    font-size:12px;
    margin-bottom:12px
  }
  .checkout-game-id__field label>span {
    font-size:9px;
    color:var(--purple)
  }
  .checkout-game-id__field input {
    width:100%
  }
  .checkout-delivery {
    padding:25px
  }
  .checkout-delivery p {
    font-size:10px;
    margin-bottom:7px;
    color:var(--purple)
  }
  .checkout-delivery__status {
    margin-top:20px
  }
  .checkout-delivery__status strong,.checkout-delivery__status span {
    display:block;
    font-size:13px
  }
  .checkout-delivery__status span {
    margin-top:7px;
    color:var(--muted)
  }
  .checkout-back,.payment-back {
    font-size:12px;
    color:var(--deep)
  }
  .checkout-summary,.payment-summary {
    position:sticky;
    top:118px;
    background:#f0e5f7
  }
  .checkout-summary__body,.payment-summary__body {
    padding:26px
  }
  .checkout-summary__row,.checkout-summary__total,.payment-summary__total {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    font-size:13px;
    margin-bottom:18px
  }
  .checkout-summary__total,.payment-summary__total {
    border-top:1px dashed #c6acd7;
    padding-top:23px;
    margin-top:25px
  }
  .checkout-summary__total strong,.payment-summary__total strong {
    font-size:30px;
    color:var(--purple);
    letter-spacing:-.04em
  }
  .checkout-submit,.payment-submit {
    width:100%
  }
  .checkout-status,.payment-form-status {
    font-size:12px;
    margin-top:16px
  }
  .checkout-loading {
    display:none;
    position:fixed;
    inset:0;
    background:#fff9eeaa;
    z-index:70;
    place-items:center
  }
  .checkout-loading.is-visible {
    display:grid
  }
  .checkout-loading span {
    width:44px;
    height:44px;
    border:4px solid #d7c2e6;
    border-top-color:var(--purple);
    border-radius:50%;
    animation:spin 1s linear infinite
  }
  .payment-panel__step {
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--pink);
    color:var(--deep);
    font-weight:800
  }
  .payment-panel__heading {
    justify-content:flex-start
  }
  .payment-methods {
    padding:25px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px
  }
  .payment-method {
    display:flex;
    gap:12px;
    align-items:center;
    border:1px solid var(--line);
    border-radius:14px;
    padding:15px;
    cursor:pointer
  }
  .payment-method.is-selected {
    border-color:var(--purple);
    background:#f1e6f7
  }
  .payment-method__control,.payment-check__box {
    display:none
  }
  .payment-method__logo img {
    width:36px;
    height:30px;
    object-fit:contain
  }
  .payment-method strong {
    font-size:12px
  }
  .payment-confirmation__body {
    padding:25px
  }
  .payment-check {
    display:flex;
    align-items:flex-start;
    gap:13px;
    font-size:13px;
    margin-bottom:22px
  }
  .payment-check a {
    text-decoration:underline;
    color:var(--purple)
  }
  .payment-check input {
    margin-top:4px
  }
  .payment-summary__details>div {
    display:flex;
    justify-content:space-between;
    gap:16px;
    font-size:11px;
    margin-bottom:18px
  }
  .payment-summary__details dd {
    text-align:right;
    overflow-wrap:anywhere
  }
  .payment-empty {
    padding:25px
  }
  .payment-success-banner {
    display:flex;
    align-items:center;
    gap:24px;
    padding:30px;
    background:#ede2f5;
    border:1px solid #d9c5e8;
    border-radius:22px;
    margin-bottom:30px
  }
  .payment-success-banner h1 {
    font-size:clamp(1.8rem,3vw,2.8rem)
  }
  .payment-success-banner p {
    font-size:12px;
    margin-bottom:9px;
    color:var(--purple)
  }
  .payment-success-banner__copy>span {
    font-size:13px;
    color:var(--muted);
    display:block;
    margin-top:14px
  }
  .payment-success-paid {
    margin-left:auto;
    text-align:right;
    white-space:nowrap
  }
  .payment-success-paid span {
    display:block;
    font-size:10px
  }
  .payment-success-paid strong {
    font-size:32px;
    color:var(--purple)
  }
  .payment-result-mark {
    width:60px;
    height:60px;
    border-radius:50%;
    background:#d6e8c9;
    color:var(--green);
    display:grid;
    place-items:center;
    flex-shrink:0
  }
  .payment-result-mark::before {
    content:'✓';
    font-size:28px;
    font-weight:800
  }
  .payment-result-mark.is-pending {
    background:#f6dfa1;
    color:#73531d
  }
  .payment-result-mark.is-pending::before {
    content:'◷'
  }
  .payment-result-page--error .payment-result-mark {
    background:#f5d5e0;
    color:var(--red)
  }
  .payment-result-page--error .payment-result-mark::before {
    content:'!'
  }
  .payment-success-grid {
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:30px
  }
  .payment-success-order__heading {
    padding:26px;
    border-bottom:1px solid var(--line)
  }
  .payment-success-order__heading p {
    font-size:10px;
    color:var(--purple);
    margin-bottom:10px
  }
  .payment-success-order__heading h2 {
    font-size:22px
  }
  .payment-success-details {
    padding:26px
  }
  .payment-success-details>div {
    display:flex;
    justify-content:space-between;
    gap:24px;
    padding:14px 0;
    border-bottom:1px solid var(--line);
    font-size:13px
  }
  .payment-success-details dd {
    text-align:right;
    overflow-wrap:anywhere
  }
  .payment-success-order__actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    padding:0 26px 28px
  }
  .payment-result-action {
    font-size:11px;
    padding:12px 17px
  }
  .payment-result-action.is-secondary {
    background:#eee3f5;
    color:var(--deep);
    box-shadow:none
  }
  .payment-success-game__visual img {
    width:100%;
    height:220px;
    object-fit:cover
  }
  .payment-success-game__copy {
    padding:28px
  }
  .payment-success-game__copy h2 {
    font-size:27px;
    margin:12px 0
  }
  .payment-success-game__copy p {
    font-size:13px;
    margin-bottom:20px
  }
  .payment-success-game__copy a {
    font-weight:800;
    color:var(--purple);
    font-size:13px
  }
  .payment-confirmation-status {
    font-size:12px;
    padding:0 26px 26px
  }
  .system-message {
    display:grid;
    grid-template-columns:.8fr 1fr;
    gap:40px;
    align-items:center;
    max-width:950px;
    margin:40px auto;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:26px;
    overflow:hidden
  }
  .system-message__visual {
    background:#eadcf3;
    position:relative;
    min-height:350px;
    display:grid;
    place-items:center
  }
  .system-message__visual>img {
    width:100%;
    height:100%;
    position:absolute;
    object-fit:cover
  }
  .system-message__mark {
    display:grid;
    place-items:center;
    width:90px;
    height:90px;
    border-radius:50%;
    background:var(--cream);
    color:var(--purple);
    font-size:35px;
    position:relative;
    box-shadow:0 6px 20px #34213f22
  }
  .system-message__content {
    padding:35px 35px 35px 0
  }
  .system-message h1 {
    font-size:30px;
    line-height:1.3
  }
  .system-message__eyebrow {
    font-size:11px;
    text-transform:uppercase;
    color:var(--purple);
    margin-bottom:15px
  }
  .system-message__redirect {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:25px 0 10px;
    font-size:12px
  }
  .system-message__progress {
    height:5px;
    background:#eee2f5;
    border-radius:5px;
    margin-bottom:24px;
    overflow:hidden
  }
  .system-message__progress span {
    display:block;
    background:var(--purple);
    height:100%
  }
  .system-message__actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap
  }
  .system-message__action {
    font-size:10px;
    padding:12px 16px
  }
  .system-message__icon-action {
    padding:12px
  }
  .system-message__action:not(.system-message__action--primary) {
    background:#eee2f5;
    color:var(--purple);
    box-shadow:none
  }
  @keyframes spin {
    to {
      transform:rotate(360deg)
    }
  }
}
@layer account {
  .account-sidebar {
    position:fixed;
    inset:0 auto 0 0;
    width:245px;
    background:#efe3f5;
    border-right:1px solid #dcc9e6;
    z-index:60;
    padding:28px 22px;
    display:flex;
    flex-direction:column
  }
  .account-brand {
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    line-height:1.2;
    font-size:17px
  }
  .account-brand img {
    width:44px;
    height:44px
  }
  .account-sidebar__top {
    display:flex;
    justify-content:space-between;
    align-items:center
  }
  .account-nav {
    margin-top:45px
  }
  .account-nav>p {
    font-size:9px;
    font-weight:800;
    letter-spacing:.17em;
    margin:25px 12px 12px;
    color:#7c5c92
  }
  .account-nav__link {
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 13px;
    border-radius:12px;
    margin-bottom:6px;
    font-size:13px
  }
  .account-nav__link>span {
    font-size:10px;
    color:#8f70a2
  }
  .account-nav__link.active {
    background:var(--purple);
    color:#fff;
    box-shadow:0 4px 0 var(--deep)
  }
  .account-nav__link.active>span {
    color:#e3ceed
  }
  .account-sidebar__profile {
    display:flex;
    gap:12px;
    align-items:center;
    margin-top:auto;
    padding:20px 0;
    border-top:1px solid #d8c4e3
  }
  .account-profile-copy {
    min-width:0
  }
  .account-profile-copy strong {
    font-size:11px;
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  .account-profile-copy span {
    display:block;
    font-size:9px;
    margin-top:4px;
    color:var(--muted)
  }
  .account-logout {
    font-size:11px;
    font-weight:800;
    padding:12px;
    text-align:center;
    border:1px solid #c9afd9;
    border-radius:12px
  }
  .account-mobile-header,.account-nav-overlay,.account-nav-close {
    display:none
  }
  .account-main {
    margin-left:245px;
    padding:48px 38px 70px;
    min-height:80vh
  }
  .account-container {
    max-width:1200px;
    margin:auto
  }
  .account-center-page>.site-footer {
    margin-left:245px
  }
  .account-center-page .footer-main,.account-center-page .footer-bottom {
    width:calc(100% - 64px)
  }
  .account-page-heading {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    margin-bottom:30px
  }
  .account-page-heading p,.account-section-heading p {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.14em;
    color:var(--purple);
    margin-bottom:12px
  }
  .account-page-heading h1 {
    font-size:clamp(1.7rem,3vw,2.7rem)
  }
  .account-page-heading__meta {
    font-size:12px;
    color:var(--muted);
    margin-top:15px;
    max-width:560px
  }
  .account-heading-actions {
    display:flex;
    gap:10px;
    flex-shrink:0
  }
  .account-button {
    font-size:10px;
    padding:12px 16px;
    min-height:42px;
    gap:10px
  }
  .account-button.is-secondary {
    background:#eee2f5;
    color:var(--deep);
    box-shadow:none;
    border:1px solid #d9c5e6
  }
  .account-button.is-danger {
    background:var(--red);
    box-shadow:0 4px 0 #7b2140
  }
  .account-game-banner {
    margin:24px 0;
    border-radius:22px;
    overflow:hidden
  }
  .account-game-banner img {
    width:100%;
    height:230px;
    object-fit:cover;
    object-position:center 55%
  }
  .account-metrics {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:17px;
    margin:26px 0 35px
  }
  .account-metric {
    border:1px solid var(--line);
    background:var(--paper);
    border-radius:18px;
    padding:23px
  }
  .account-metric.is-accent {
    background:#f0e3f7;
    border-color:#ddc8e9
  }
  .account-metric>span {
    display:block;
    font-size:11px;
    color:var(--muted)
  }
  .account-metric>strong {
    font-size:32px;
    letter-spacing:-.05em;
    display:block;
    margin-top:8px;
    color:var(--purple)
  }
  .account-section,.account-card,.account-detail-panel,.account-order-panel {
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:20px;
    margin-bottom:25px;
    overflow:hidden
  }
  .account-section-heading {
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    padding:25px
  }
  .account-section-heading h2 {
    font-size:23px
  }
  .account-table-wrap {
    overflow-x:auto
  }
  .account-table {
    min-width:660px;
    font-size:11px
  }
  .account-table th {
    text-align:left;
    background:#f3ecdf;
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    padding:14px 18px;
    white-space:nowrap
  }
  .account-table td {
    padding:21px 18px;
    border-top:1px solid var(--line);
    vertical-align:middle
  }
  .account-product-cell {
    display:flex;
    gap:12px;
    align-items:center;
    min-width:150px
  }
  .account-product-cell img {
    width:48px;
    height:48px;
    object-fit:contain;
    background:#f0e4f6;
    border-radius:10px
  }
  .account-product-cell strong,.account-product-cell span {
    display:block
  }
  .account-product-cell span {
    font-size:10px;
    color:var(--muted);
    margin-top:5px
  }
  .account-status {
    display:inline-block;
    padding:6px 9px;
    background:#f9ebc8;
    border-radius:8px;
    font-size:9px;
    font-weight:800;
    color:#795a15;
    white-space:nowrap
  }
  .account-status.is-paid,.account-status.is-complete {
    background:#e4efda;
    color:var(--green)
  }
  .account-status.is-cancelled {
    background:#f5dce4;
    color:var(--red)
  }
  .account-empty {
    padding:65px 30px;
    text-align:center
  }
  .account-empty strong,.account-empty span {
    display:block
  }
  .account-empty strong {
    font-size:23px
  }
  .account-empty span {
    color:var(--muted);
    font-size:13px;
    margin:12px 0 23px
  }
  .account-tabs {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:24px
  }
  .account-tab {
    padding:10px 16px;
    border:1px solid #dcc8e7;
    border-radius:99px;
    font-size:11px;
    background:var(--paper)
  }
  .account-tab.active {
    background:var(--purple);
    color:white
  }
  .account-search {
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:22px;
    flex-wrap:wrap
  }
  .account-search input {
    flex:1;
    min-width:160px
  }
  .account-search button {
    padding:13px 20px;
    background:var(--purple);
    color:white;
    border-radius:12px
  }
  .account-order-grid,.account-detail-grid {
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(250px,1fr);
    gap:24px
  }
  .account-info-grid,.account-order-info,.account-detail-list {
    padding:24px
  }
  .account-info-grid>div,.account-detail-list>div {
    display:flex;
    justify-content:space-between;
    gap:20px;
    font-size:12px;
    padding:12px 0;
    border-bottom:1px solid var(--line)
  }
  .account-detail-list dt {
    color:var(--muted)
  }
  .account-detail-list dd {
    text-align:right
  }
  .account-order-summary {
    padding:25px;
    background:#f0e4f6;
    border-radius:18px
  }
  .account-order-actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    padding:24px
  }
  .account-action-status {
    font-size:12px;
    margin:20px 0
  }
  .account-pagination,.pagination {
    display:flex;
    justify-content:center;
    gap:8px;
    padding:24px;
    list-style:none;
    flex-wrap:wrap
  }
  .pagination a,.pagination span,.account-pagination a,.account-pagination span {
    display:inline-block;
    padding:6px 12px;
    background:#ede1f4;
    border-radius:8px;
    font-size:12px
  }
  .account-redeem-modal {
    position:fixed;
    inset:0;
    display:grid;
    place-items:center;
    background:#291735aa;
    z-index:100;
    padding:20px
  }
  .account-redeem-dialog {
    width:min(500px,100%);
    background:var(--paper);
    border:1px solid #dac4e8;
    border-radius:24px;
    padding:30px;
    box-shadow:0 30px 100px #29173550
  }
  .account-redeem-dialog h2 {
    font-size:25px;
    margin:14px 0
  }
  .account-redeem-dialog p {
    font-size:13px;
    margin:12px 0
  }
  .account-redeem-close {
    float:right;
    background:#eee2f5;
    border-radius:50%;
    width:32px;
    height:32px
  }
  .account-redeem-close::before {
    content:'×'
  }
  .account-redeem-actions {
    display:flex;
    justify-content:flex-end;
    gap:14px;
    margin-top:25px
  }
  .account-redeem-result {
    background:#e8efdc;
    padding:20px;
    border-radius:15px;
    text-align:center
  }
  .account-redeem-result strong {
    display:block;
    font-size:35px;
    color:var(--green)
  }
  .account-redeem-message {
    min-height:22px
  }
  .account-code {
    font-family:Consolas,monospace;
    overflow-wrap:anywhere;
    background:#f5edf8;
    padding:8px;
    border-radius:8px
  }
  .account-breadcrumb {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    font-size:11px;
    color:var(--muted);
    margin-bottom:24px
  }
}
@layer auth {
  .auth-shell {
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:100dvh
  }
  .auth-showcase {
    background:#ede0f4;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:45px;
    position:relative;
    overflow:hidden
  }
  .auth-brand {
    display:flex;
    gap:12px;
    align-items:center;
    font-weight:900;
    font-size:21px;
    letter-spacing:-.04em;
    z-index:1
  }
  .auth-brand__mark img {
    width:49px;
    height:49px
  }
  .auth-showcase__visual {
    margin:40px -10px 30px;
    transform:rotate(-3deg);
    padding:15px;
    background:var(--cream);
    border-radius:28px;
    box-shadow:0 12px 0 #d8bfe8
  }
  .auth-showcase__visual img {
    width:100%;
    height:clamp(230px,32vw,430px);
    object-fit:cover;
    border-radius:17px
  }
  .auth-showcase__copy {
    max-width:440px;
    position:relative
  }
  .auth-showcase__copy>p {
    font-size:10px;
    letter-spacing:.17em;
    color:var(--purple);
    margin-bottom:14px
  }
  .auth-showcase__copy>strong {
    display:block;
    font-size:clamp(2rem,3.5vw,3.5rem);
    line-height:1.05;
    font-weight:900;
    letter-spacing:-.05em
  }
  .auth-showcase__copy>span {
    display:block;
    font-size:13px;
    color:var(--muted);
    margin-top:20px
  }
  .auth-workspace {
    padding:45px 60px;
    background:var(--cream)
  }
  .auth-topbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em
  }
  .auth-home-link span {
    margin-right:10px
  }
  .auth-switch-link {
    color:var(--purple);
    text-decoration:underline;
    text-underline-offset:4px
  }
  .auth-form-wrap {
    max-width:420px;
    margin:75px auto 30px
  }
  .auth-heading {
    margin-bottom:30px
  }
  .auth-heading>p {
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.15em;
    color:var(--purple);
    margin-bottom:15px
  }
  .auth-heading h1 {
    font-size:clamp(2.2rem,3.2vw,3.2rem);
    margin-bottom:16px
  }
  .auth-heading>span {
    font-size:13px;
    color:var(--muted);
    display:block
  }
  .auth-field {
    margin-bottom:23px
  }
  .auth-field label,.auth-field__label-row {
    font-size:10px;
    font-weight:800;
    letter-spacing:.07em;
    display:block;
    margin-bottom:10px
  }
  .auth-field__label-row {
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center
  }
  .auth-field__label-row label {
    margin:0
  }
  .auth-field__label-row a {
    color:var(--purple);
    letter-spacing:0
  }
  .auth-input-wrap {
    position:relative
  }
  .auth-input-wrap input,.auth-input-wrap select {
    width:100%;
    min-height:50px
  }
  .auth-input-wrap--password input {
    padding-right:65px
  }
  .auth-password-toggle,.auth-input-wrap>button {
    position:absolute;
    right:8px;
    top:10px;
    background:#eee1f5;
    color:var(--deep);
    font-size:9px;
    font-weight:800;
    padding:8px 10px;
    border-radius:7px
  }
  .auth-field__error {
    font-size:11px;
    margin-top:6px
  }
  .auth-submit {
    width:100%
  }
  .auth-code-row {
    display:flex;
    gap:12px;
    align-items:stretch
  }
  .auth-code-row>.auth-input-wrap {
    flex:1;
    min-width:0
  }
  .auth-code-row>button {
    border-radius:11px;
    padding:10px 15px;
    background:#eadcf3;
    color:var(--purple);
    font-size:10px;
    font-weight:800
  }
  .auth-captcha {
    padding:4px!important;
    background:white!important;
    border:1px solid var(--line)
  }
  .auth-captcha img {
    max-width:120px;
    height:42px
  }
  .auth-status {
    font-size:12px;
    min-height:20px;
    margin-top:16px
  }
  .auth-note,.auth-policy,.auth-form__footer,.auth-bottom-note,.auth-form-footer,.auth-terms {
    font-size:11px;
    color:var(--muted);
    margin-top:25px;
    text-align:center
  }
  .auth-note a,.auth-policy a,.auth-form-footer a,.auth-terms a {
    color:var(--purple);
    text-decoration:underline
  }
  .auth-success {
    padding:30px;
    background:#edf2e3;
    border:1px solid #d2dfc3;
    border-radius:18px;
    margin:25px 0
  }
  .auth-success h2 {
    font-size:25px;
    margin-bottom:12px
  }
  .auth-success p {
    font-size:13px
  }
  .auth-success__icon {
    color:var(--green);
    font-size:30px
  }
  .auth-stepper {
    display:flex;
    gap:12px;
    font-size:10px;
    margin:25px 0;
    color:var(--muted)
  }
  .auth-stepper .is-active {
    color:var(--purple);
    font-weight:800
  }
}
@layer legal {
  .legal-hero {
    background:#eee2f5;
    border-bottom:1px solid #ddc9e7
  }
  .legal-hero__inner {
    width:min(1000px,calc(100% - 80px));
    margin:auto;
    padding:65px 0 38px
  }
  .legal-eyebrow {
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.14em;
    color:var(--purple);
    margin-bottom:18px
  }
  .legal-hero h1 {
    font-size:clamp(2.2rem,4vw,3.8rem)
  }
  .legal-summary {
    max-width:680px;
    font-size:14px;
    margin-top:20px
  }
  .legal-policy-nav {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:30px
  }
  .legal-policy-nav a {
    padding:9px 20px;
    border:1px solid #d1b9df;
    border-radius:99px;
    font-size:12px
  }
  .legal-policy-nav a[aria-current=page] {
    background:var(--purple);
    color:white;
    border-color:var(--purple)
  }
  .legal-layout {
    max-width:1000px;
    width:calc(100% - 80px);
    margin:45px auto 70px
  }
  .legal-article {
    padding:50px 60px;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:22px;
    font-size:14px;
    line-height:1.9
  }
  .legal-article h2 {
    font-size:25px;
    margin:35px 0 16px;
    line-height:1.3;
    letter-spacing:-.025em
  }
  .legal-article h3 {
    font-size:19px;
    margin:26px 0 12px;
    letter-spacing:-.02em
  }
  .legal-article p,.legal-article ul,.legal-article ol {
    margin-bottom:16px;
    color:#665969
  }
  .legal-article a {
    color:var(--purple);
    text-decoration:underline;
    overflow-wrap:anywhere
  }
  .legal-article li {
    margin-bottom:10px
  }
  .legal-updated,.legal-meta {
    font-size:11px;
    color:var(--muted)
  }
  .legal-popup-page {
    padding:25px;
    background:var(--cream)
  }
  .legal-popup-page .legal-article {
    max-width:900px;
    margin:auto;
    padding:30px;
    border:0
  }
  .legal-popup-header {
    max-width:900px;
    margin:15px auto 30px
  }
  .legal-popup-header h1 {
    font-size:32px
  }
  .legal-popup-header p {
    font-size:12px;
    margin-top:12px
  }
  .legal-popup-main {
    max-width:950px;
    margin:auto
  }
  .paypage-main,.paypage-result {
    max-width:850px;
    margin:65px auto;
    padding:40px;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:22px
  }
}
@layer responsive {
  /* Review pass: detail views and embedded policies use the same layout contracts. */
  .shop-layout {
    grid-template-columns:1fr
  }
  .account-detail-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 310px;
    gap:25px;
    align-items:start
  }
  .account-detail-content {
    min-width:0
  }
  .account-status-hero {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    background:#eee1f5;
    border:1px solid #dbc3e8;
    border-radius:20px;
    padding:27px;
    margin-bottom:27px
  }
  .account-status-hero h2 {
    font-size:28px;
    margin:10px 0
  }
  .account-status-hero p {
    font-size:10px;
    color:var(--purple);
    text-transform:uppercase;
    letter-spacing:.12em
  }
  .account-status-hero span:not(.account-status) {
    font-size:12px;
    color:var(--muted)
  }
  .account-detail-panel__heading,.account-summary__heading {
    padding:23px;
    border-bottom:1px solid var(--line)
  }
  .account-detail-panel__heading h2,.account-summary__heading h2 {
    font-size:21px
  }
  .account-detail-panel__body {
    padding:24px
  }
  .account-summary {
    background:#eee2f5;
    border:1px solid #d9c1e6;
    border-radius:20px;
    overflow:hidden;
    position:sticky;
    top:25px
  }
  .account-summary__heading p {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--purple);
    margin-bottom:8px
  }
  .account-summary__body {
    padding:24px
  }
  .account-summary dl>div {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:17px;
    font-size:11px
  }
  .account-summary dd {
    max-width:65%;
    text-align:right;
    overflow-wrap:anywhere
  }
  .account-summary dt {
    color:var(--muted)
  }
  .account-summary__total {
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px dashed #c6a9d5;
    margin:24px 0;
    padding-top:20px;
    font-size:12px
  }
  .account-summary__total strong {
    font-size:28px;
    letter-spacing:-.04em;
    color:var(--purple)
  }
  .account-summary__actions {
    display:grid;
    gap:13px
  }
  .account-product-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding-block:15px
  }
  .account-product-row+.account-product-row {
    border-top:1px solid var(--line)
  }
  .account-product-row__main {
    display:flex;
    gap:15px;
    align-items:center;
    min-width:0
  }
  .account-product-row__main img {
    width:65px;
    height:65px;
    object-fit:contain;
    background:#f2e7f7;
    padding:8px;
    border-radius:13px;
    flex-shrink:0
  }
  .account-product-row__main strong {
    font-size:13px;
    display:block
  }
  .account-product-row__main span {
    font-size:11px;
    color:var(--muted)
  }
  .account-product-row__price {
    text-align:right;
    flex-shrink:0
  }
  .account-product-row__price strong {
    font-size:15px;
    display:block
  }
  .account-product-row__price span {
    display:block;
    font-size:10px;
    color:var(--muted)
  }
  .account-info-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:23px
  }
  .account-info-grid span,.account-info-grid strong {
    display:block;
    font-size:12px;
    overflow-wrap:anywhere
  }
  .account-info-grid span {
    font-size:10px;
    color:var(--muted);
    margin-bottom:6px
  }
  .account-code {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:18px;
    margin-bottom:14px;
    border:1px solid #e1cdec;
    border-radius:12px
  }
  .account-code strong {
    display:block;
    font-size:14px
  }
  .account-code span:not(.account-status) {
    display:block;
    font-size:10px;
    color:var(--muted);
    margin-top:6px
  }
  .account-code.is-used {
    background:#f0f4e8
  }
  .account-code.is-expired {
    background:#f4e8e8;
    opacity:.75
  }
  .account-redeem-dialog__close {
    float:right;
    width:32px;
    height:32px;
    background:#eee0f5;
    border-radius:50%
  }
  .account-redeem-dialog__close::before {
    content:'×';
    font-size:23px
  }
  .account-redeem-dialog__actions {
    display:flex;
    gap:14px;
    justify-content:flex-end;
    margin-top:22px
  }
  .account-redeem-dialog__eyebrow {
    font-size:10px!important;
    color:var(--purple);
    letter-spacing:.1em
  }
  .account-redeem-account {
    padding:14px;
    background:#f2e7f7;
    border-radius:12px;
    font-size:12px
  }
  .account-redeem-account dt {
    font-size:10px;
    color:var(--muted)
  }
  .account-redeem-account dd {
    overflow-wrap:anywhere
  }
  .account-tabs>a {
    display:flex;
    gap:10px;
    align-items:center;
    padding:10px 16px;
    border:1px solid #dcc8e7;
    border-radius:99px;
    font-size:10px;
    background:var(--paper)
  }
  .account-tabs>a.is-active {
    background:var(--purple);
    color:white
  }
  .account-tabs>a>span {
    opacity:.7
  }
  .payment-success-complete {
    padding:28px;
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    align-items:center;
    background:#eee2f5
  }
  .payment-success-complete__copy {
    flex:1;
    min-width:170px
  }
  .payment-success-complete__copy>p {
    font-size:10px;
    letter-spacing:.09em;
    color:var(--purple);
    text-transform:uppercase;
    margin-bottom:13px
  }
  .payment-success-complete h1 {
    font-size:30px;
    line-height:1.12
  }
  .payment-success-complete__copy>span {
    display:block;
    font-size:12px;
    color:var(--muted);
    margin-top:14px
  }
  .payment-success-complete .payment-success-paid {
    width:100%;
    text-align:left;
    margin:0;
    border-top:1px solid #d8c2e6;
    padding-top:18px
  }
  .payment-success-paid small {
    font-size:9px;
    color:var(--muted);
    margin-left:12px
  }
  .payment-success-cogs {
    display:none
  }
  .payment-success-sr-title {
    position:absolute;
    width:1px;
    height:1px;
    clip-path:inset(50%);
    overflow:hidden;
    white-space:nowrap
  }
  .payment-result-page--error .payment-success-grid {
    grid-template-columns:minmax(0,750px);
    justify-content:center
  }
  .system-message__code {
    position:relative;
    background:var(--cream);
    border-radius:20px;
    padding:8px 25px;
    font-size:70px;
    font-weight:900;
    color:var(--purple)
  }
  .system-message__copy {
    font-size:13px;
    margin:20px 0 26px
  }
  .legal-popup {
    background:var(--cream)
  }
  .legal-popup__intro {
    max-width:900px;
    margin:35px auto 25px;
    padding:0 30px
  }
  .legal-popup__intro h1 {
    font-size:35px
  }
  .legal-popup__intro p {
    font-size:13px;
    margin-top:16px
  }
  .legal-popup__layout {
    max-width:900px;
    margin:0 auto 40px;
    padding:0 20px
  }
  .legal-popup .legal-article {
    padding:30px
  }
  .legal-popup>.site-footer {
    display:none
  }
  .auth-complete-mark {
    display:grid;
    place-items:center;
    background:#e2edcf;
    color:var(--green);
    width:64px;
    height:64px;
    border-radius:50%;
    margin-bottom:28px
  }
  .auth-complete-mark::before {
    content:'✓';
    font-size:30px
  }
  .external-payment-main {
    max-width:820px;
    margin:60px auto;
    padding:0 25px
  }
  .external-result {
    border:1px solid var(--line);
    border-radius:24px;
    overflow:hidden;
    background:var(--paper)
  }
  .external-result__status {
    display:flex;
    align-items:center;
    gap:22px;
    padding:35px;
    background:#efe2f5
  }
  .external-result__icon {
    display:grid;
    place-items:center;
    width:60px;
    height:60px;
    border-radius:50%;
    background:#dcebd1;
    color:var(--green);
    flex-shrink:0
  }
  .external-result__icon::before {
    content:'✓';
    font-size:30px
  }
  .external-payment-page.is-error .external-result__icon {
    background:#f5d1dd;
    color:var(--red)
  }
  .external-payment-page.is-error .external-result__icon::before {
    content:'!'
  }
  .external-result__status-copy h1 {
    font-size:32px;
    margin:12px 0
  }
  .external-result__status-copy>p {
    font-size:10px;
    color:var(--purple);
    text-transform:uppercase;
    letter-spacing:.1em
  }
  .external-result__status-copy>span {
    font-size:13px;
    color:var(--muted)
  }
  .external-order {
    padding:30px
  }
  .external-order__heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px
  }
  .external-order__heading h2 {
    font-size:21px
  }
  .external-order__badge {
    padding:6px 10px;
    border-radius:8px;
    background:#eee2f5;
    color:var(--purple);
    font-size:10px;
    font-weight:800
  }
  .external-order__details>div {
    display:flex;
    justify-content:space-between;
    gap:25px;
    font-size:13px;
    padding:15px 0;
    border-top:1px solid var(--line)
  }
  .external-order__details dd {
    max-width:65%;
    overflow-wrap:anywhere;
    text-align:right
  }
  .external-order__details dt {
    color:var(--muted)
  }
  @media(max-width:1100px) {
    .account-detail-layout {
      grid-template-columns:1fr
    }
    .account-summary {
      position:static
    }
  }
  @media(max-width:640px) {
    .account-status-hero {
      padding:22px;
      align-items:flex-start;
      flex-wrap:wrap
    }
    .account-status-hero h2 {
      font-size:24px
    }
    .account-detail-panel__heading,.account-detail-panel__body,.account-summary__heading,.account-summary__body {
      padding:20px
    }
    .account-code {
      align-items:flex-start;
      flex-wrap:wrap;
      gap:15px
    }
    .account-code .account-button {
      width:100%
    }
    .account-product-row {
      gap:12px
    }
    .account-product-row__main img {
      width:45px;
      height:45px
    }
    .account-product-row__main strong {
      font-size:12px
    }
    .account-info-grid {
      grid-template-columns:1fr
    }
    .account-tabs>a {
      padding:9px 12px;
      font-size:9px
    }
    .payment-success-complete {
      padding:22px
    }
    .payment-success-complete h1 {
      font-size:26px
    }
    .legal-popup__intro {
      padding:0 20px;
      margin-top:25px
    }
    .legal-popup__intro h1 {
      font-size:29px
    }
    .legal-popup__layout {
      padding:0 12px
    }
    .legal-popup .legal-article {
      padding:22px 17px
    }
    .external-payment-main {
      margin:30px auto;
      padding:0 18px
    }
    .external-result__status {
      padding:25px;
      align-items:flex-start;
      flex-wrap:wrap
    }
    .external-result__status-copy h1 {
      font-size:28px
    }
    .external-order {
      padding:22px
    }
    .external-order__heading h2 {
      font-size:18px
    }
    .external-order__details>div {
      font-size:11px;
      gap:16px
    }
    .system-message__code {
      font-size:55px
    }
    .account-redeem-dialog__actions {
      flex-wrap:wrap
    }
  }
  @media(min-width:1500px) {
    .snack-hero {
      padding-block:100px
    }
    .container {
      max-width:1280px
    }
  }
  @media(max-width:1100px) {
    .container {
      width:calc(100% - 48px)
    }
    .nav {
      gap:20px
    }
    .nav-links {
      gap:18px
    }
    .header-actions {
      gap:12px
    }
    .hero-copy h1 {
      font-size:5rem
    }
    .snack-hero-grid {
      gap:35px
    }
    .hero-actions {
      gap:20px
    }
    .hero-actions .button {
      padding:14px 18px
    }
    .feature-layout {
      gap:45px
    }
    .footer-main {
      gap:25px
    }
    .shop-layout {
      grid-template-columns:1fr
    }
    .shop-sidebar,.shop-aside {
      display:none
    }
    .account-heading-actions {
      flex-wrap:wrap;
      justify-content:flex-end
    }
    .account-main {
      padding-inline:25px
    }
    .account-metric {
      padding:18px
    }
    .account-metric>strong {
      font-size:27px
    }
    .account-page-heading h1 {
      font-size:29px
    }
    .account-center-page .footer-main {
      grid-template-columns:repeat(2,1fr)
    }
    .auth-workspace {
      padding:35px
    }
    .checkout-layout,.payment-layout {
      grid-template-columns:minmax(0,1fr) 300px;
      gap:20px
    }
  }
  @media(max-width:900px) {
    .nav {
      min-height:80px
    }
    .nav-links {
      display:none;
      position:absolute;
      top:79px;
      left:0;
      right:0;
      background:var(--cream);
      padding:22px 24px 28px;
      border-bottom:1px solid var(--line);
      box-shadow:0 14px 24px #34213f15
    }
    .nav-links.is-open {
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:20px
    }
    .nav-toggle {
      display:block
    }
    .header-actions {
      margin-left:auto
    }
    .brand>span {
      font-size:18px
    }
    .brand small {
      font-size:21px
    }
    .brand img {
      width:43px;
      height:43px
    }
    .snack-hero {
      padding:55px 0 65px
    }
    .hero-copy h1 {
      font-size:4.25rem
    }
    .hero-description {
      font-size:15px
    }
    .hero-description br {
      display:none
    }
    .level-sticker {
      left:-15px;
      padding:12px 16px
    }
    .level-sticker strong {
      font-size:40px
    }
    .hero-note {
      align-items:flex-start
    }
    .section {
      padding:70px 0
    }
    .section-heading {
      gap:35px
    }
    .how-grid article {
      padding:25px
    }
    .feature-layout {
      gap:35px
    }
    .snack-gallery {
      gap:15px
    }
    .snack-gallery figure {
      padding:14px 14px 0
    }
    .snack-gallery figcaption {
      font-size:12px
    }
    .rewards-inner {
      gap:35px
    }
    .footer-main {
      grid-template-columns:1.3fr 1fr;
      gap:35px
    }
    .checkout-layout,.payment-layout {
      grid-template-columns:1fr
    }
    .checkout-summary,.payment-summary {
      position:static
    }
    .payment-success-grid {
      grid-template-columns:1fr
    }
    .payment-success-game {
      display:grid;
      grid-template-columns:1fr 1fr
    }
    .payment-success-game__visual img {
      height:100%;
      min-height:230px
    }
    .account-sidebar {
      transform:translateX(-100%);
      transition:transform .2s
    }
    .account-main {
      margin-left:0;
      padding:35px 24px 60px
    }
    .account-center-page>.site-footer {
      margin-left:0
    }
    .account-mobile-header {
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:15px 24px;
      background:var(--paper);
      border-bottom:1px solid var(--line)
    }
    .account-mobile-brand {
      display:flex;
      align-items:center;
      gap:12px;
      font-size:12px;
      font-weight:800
    }
    .account-mobile-brand img {
      width:38px;
      height:38px
    }
    .account-nav-toggle {
      background:none
    }
    .account-nav-close {
      display:block;
      background:transparent;
      font-size:25px
    }
    .account-nav-close::before {
      content:'×'
    }
    .is-nav-open .account-sidebar {
      transform:translateX(0)
    }
    .is-nav-open .account-nav-overlay {
      display:block;
      position:fixed;
      inset:0;
      background:#29173588;
      z-index:50
    }
    .auth-showcase {
      padding:30px
    }
    .auth-showcase__copy>strong {
      font-size:34px
    }
    .auth-form-wrap {
      margin-top:60px
    }
    .legal-article {
      padding:35px
    }
    .system-message {
      gap:25px
    }
    .system-message__content {
      padding-right:25px
    }
  }
  @media(max-width:640px) {
    .container {
      width:calc(100% - 36px)
    }
    .nav {
      gap:10px;
      min-height:74px
    }
    .brand img {
      width:38px;
      height:38px
    }
    .brand>span {
      font-size:15px
    }
    .brand small {
      font-size:18px
    }
    .header-actions {
      gap:10px
    }
    .header-actions .button {
      min-height:36px;
      font-size:10px;
      padding:9px 12px;
      gap:8px
    }
    .login-link {
      font-size:11px
    }
    .account-name {
      display:none
    }
    .nav-links {
      top:73px
    }
    .snack-hero {
      padding:40px 0 55px
    }
    .snack-hero-grid {
      grid-template-columns:1fr;
      gap:46px
    }
    .hero-copy h1 {
      font-size:clamp(3.6rem,13.8vw,5.5rem)
    }
    .hero-description {
      font-size:15px;
      margin:24px 0
    }
    .hero-description br {
      display:block
    }
    .eyebrow {
      font-size:10px;
      margin-bottom:20px
    }
    .hero-actions {
      gap:24px
    }
    .hero-actions .button {
      font-size:12px;
      min-height:49px
    }
    .hero-note {
      font-size:10px;
      margin-top:22px
    }
    .hero-art {
      max-width:460px;
      width:calc(100% - 14px);
      justify-self:center;
      transform:rotate(1deg);
      padding:13px 13px 0;
      border-radius:85px 85px 22px 22px
    }
    .art-topline {
      font-size:9px;
      padding:12px 14px
    }
    .art-topline span:last-child {
      font-size:28px
    }
    .hero-art>img {
      aspect-ratio:1.2;
      border-radius:65px 65px 10px 10px
    }
    .level-sticker {
      bottom:58px;
      left:-8px;
      padding:10px 14px
    }
    .level-sticker strong {
      font-size:37px
    }
    .level-sticker span {
      font-size:9px
    }
    .art-caption {
      font-size:10px
    }
    .snack-ribbon {
      gap:25px;
      font-size:9px;
      padding:13px 15px;
      justify-content:flex-start
    }
    .snack-ribbon>span:nth-child(even) {
      font-size:17px
    }
    .section {
      padding:58px 0
    }
    .section-heading {
      grid-template-columns:1fr;
      gap:22px;
      margin-bottom:30px
    }
    .section-heading>p {
      font-size:14px
    }
    .section-heading h2 {
      font-size:34px
    }
    .how-grid {
      grid-template-columns:1fr
    }
    .how-grid article {
      padding:24px 25px 27px;
      display:grid;
      grid-template-columns:50px 1fr;
      column-gap:18px
    }
    .how-grid article+article {
      border-left:0;
      border-top:1px solid var(--line)
    }
    .step-number {
      grid-column:1;
      grid-row:1
    }
    .step-symbol {
      grid-column:1;
      grid-row:2/4;
      font-size:39px;
      height:65px
    }
    .match-symbol {
      font-size:13px;
      letter-spacing:0
    }
    .how-grid h3 {
      grid-column:2;
      grid-row:1/3;
      margin:0 0 10px;
      font-size:22px
    }
    .how-grid p {
      grid-column:2;
      font-size:13px
    }
    .feature-layout {
      grid-template-columns:1fr;
      gap:45px
    }
    .feature-art {
      margin-inline:8px;
      padding:13px
    }
    .feature-art img {
      aspect-ratio:1.3
    }
    .image-label {
      font-size:8px;
      padding-top:17px
    }
    .feature-copy h2 {
      font-size:38px
    }
    .feature-copy h2 br:first-child {
      display:none
    }
    .feature-list li {
      font-size:13px
    }
    .snack-gallery {
      display:flex;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      padding:0 0 18px;
      gap:18px
    }
    .snack-gallery figure {
      flex:0 0 78%;
      scroll-snap-align:center;
      padding:20px 20px 0
    }
    .snack-gallery figure:nth-child(2) {
      transform:none
    }
    .snack-gallery img {
      height:370px;
      width:100%
    }
    .snack-gallery figcaption {
      font-size:12px
    }
    .rewards-teaser {
      padding:45px 0
    }
    .rewards-inner {
      grid-template-columns:1fr;
      gap:35px
    }
    .rewards-inner img {
      transform:rotate(-1deg);
      width:100%
    }
    .rewards-inner h2 {
      font-size:38px
    }
    .final-section h2 {
      font-size:33px
    }
    .final-section p {
      font-size:14px
    }
    .footer-main {
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:30px 22px;
      padding-bottom:30px
    }
    .footer-brand {
      grid-column:1/-1
    }
    .footer-brand p {
      font-size:20px;
      margin-top:18px
    }
    .footer-block h2 {
      font-size:13px
    }
    .footer-block {
      font-size:11px;
      gap:9px
    }
    .footer-main>.footer-block:last-child {
      grid-column:1/-1
    }
    .site-footer {
      padding-top:38px
    }
    .footer-bottom {
      display:block;
      font-size:10px;
      padding-block:20px
    }
    .footer-bottom>span {
      display:block;
      margin-bottom:5px
    }
    .shop-banner__content {
      padding-block:50px
    }
    .shop-banner h1 {
      font-size:37px
    }
    .shop-banner__content>span {
      font-size:13px
    }
    .shop-banner__overlay {
      background:#321441b8
    }
    .shop-market,.activity-market {
      padding:30px 0 50px
    }
    .shop-category-bar {
      gap:8px
    }
    .shop-category {
      padding:8px 14px;
      font-size:11px
    }
    .shop-product-grid {
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px
    }
    .shop-product-card__visual {
      min-height:125px;
      padding:15px
    }
    .shop-product-card__visual img {
      width:90px;
      height:90px
    }
    .shop-product-card__body {
      padding:15px 12px
    }
    .shop-product-card__body>strong {
      font-size:14px
    }
    .shop-product-card__category {
      font-size:8px
    }
    .shop-product-card__meta {
      flex-wrap:wrap;
      margin-top:13px
    }
    .shop-product-card__meta b {
      font-size:18px
    }
    .shop-product-card__meta small {
      font-size:9px
    }
    .shop-catalog__heading h2 {
      font-size:23px
    }
    .shop-custom-pack {
      grid-template-columns:1fr
    }
    .shop-custom-pack__copy,.shop-custom-pack__checkout {
      padding:24px
    }
    .activity-hero__inner {
      padding-block:45px
    }
    .activity-hero h1 {
      font-size:35px
    }
    .activity-hero__copy>span {
      font-size:13px
    }
    .activity-grid {
      grid-template-columns:1fr
    }
    .activity-card__image img {
      height:220px
    }
    .activity-pagination {
      font-size:10px;
      gap:15px
    }
    .checkout-container,.payment-container,.payment-result-container,.system-message-container {
      padding-block:25px 45px
    }
    .checkout-heading h1,.payment-heading h1 {
      font-size:30px
    }
    .checkout-breadcrumb,.payment-breadcrumb,.payment-result-breadcrumb {
      font-size:10px;
      margin-bottom:25px
    }
    .checkout-table__head {
      display:none
    }
    .checkout-item {
      grid-template-columns:repeat(3,1fr);
      padding:20px
    }
    .checkout-item__product {
      grid-column:1/-1;
      margin-bottom:15px
    }
    .checkout-item__value::before {
      content:attr(data-label);
      display:block;
      font-size:9px;
      color:var(--muted);
      margin-bottom:5px
    }
    .checkout-panel__heading,.checkout-game-id__heading,.checkout-summary__heading,.payment-panel__heading,.payment-summary__heading {
      padding:20px
    }
    .checkout-panel h2,.checkout-game-id h2,.checkout-summary h2,.payment-panel h2,.payment-summary h2 {
      font-size:19px
    }
    .payment-methods {
      grid-template-columns:1fr;
      padding:20px
    }
    .payment-confirmation__body {
      padding:20px
    }
    .payment-check {
      font-size:12px
    }
    .payment-success-banner {
      padding:22px;
      flex-wrap:wrap;
      gap:16px
    }
    .payment-success-banner h1 {
      font-size:27px
    }
    .payment-result-mark {
      width:43px;
      height:43px
    }
    .payment-success-banner__copy {
      flex:1;
      min-width:160px
    }
    .payment-success-paid {
      margin:0;
      text-align:left;
      padding-top:14px;
      border-top:1px solid #d7bfdf;
      width:100%
    }
    .payment-success-paid strong {
      font-size:28px
    }
    .payment-success-game {
      grid-template-columns:1fr
    }
    .payment-success-game__visual img {
      height:190px;
      min-height:0
    }
    .payment-success-details>div {
      font-size:11px;
      gap:15px
    }
    .payment-success-order__actions {
      padding-inline:20px
    }
    .payment-result-action {
      font-size:10px;
      flex:1
    }
    .account-main {
      padding:28px 18px 45px
    }
    .account-page-heading {
      display:block
    }
    .account-page-heading h1 {
      font-size:28px
    }
    .account-heading-actions {
      justify-content:flex-start;
      margin-top:22px
    }
    .account-game-banner img {
      height:165px
    }
    .account-metrics {
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px
    }
    .account-metric {
      padding:18px
    }
    .account-metric>strong {
      font-size:28px
    }
    .account-section-heading {
      padding:20px;
      align-items:flex-start
    }
    .account-section-heading h2 {
      font-size:20px
    }
    .account-text-link {
      font-size:10px
    }
    .account-order-grid,.account-detail-grid {
      grid-template-columns:1fr
    }
    .account-center-page .footer-main,.account-center-page .footer-bottom {
      width:calc(100% - 36px)
    }
    .account-tabs {
      gap:7px
    }
    .account-tab {
      font-size:10px;
      padding:8px 12px
    }
    .account-redeem-dialog {
      padding:25px
    }
    .account-redeem-dialog h2 {
      font-size:23px
    }
    .auth-shell {
      grid-template-columns:1fr
    }
    .auth-showcase {
      padding:24px;
      background:#eadcf3
    }
    .auth-brand {
      font-size:18px
    }
    .auth-brand__mark img {
      width:42px;
      height:42px
    }
    .auth-showcase__visual {
      display:none
    }
    .auth-showcase__copy {
      margin-top:25px
    }
    .auth-showcase__copy>strong {
      font-size:32px;
      max-width:330px
    }
    .auth-showcase__copy>p {
      font-size:9px;
      margin-bottom:10px
    }
    .auth-showcase__copy>span {
      font-size:12px;
      margin-top:14px
    }
    .auth-workspace {
      padding:25px 24px 40px
    }
    .auth-topbar {
      font-size:9px
    }
    .auth-form-wrap {
      margin:36px auto 15px;
      max-width:460px
    }
    .auth-heading h1 {
      font-size:34px
    }
    .auth-field {
      margin-bottom:21px
    }
    .auth-code-row {
      gap:8px
    }
    .auth-code-row>button {
      padding:10px;
      font-size:9px
    }
    .legal-hero__inner {
      width:calc(100% - 36px);
      padding:42px 0 30px
    }
    .legal-hero h1 {
      font-size:35px
    }
    .legal-summary {
      font-size:13px
    }
    .legal-policy-nav {
      gap:8px
    }
    .legal-policy-nav a {
      font-size:11px;
      padding:8px 16px
    }
    .legal-layout {
      width:calc(100% - 36px);
      margin:25px auto 45px
    }
    .legal-article {
      padding:24px 20px;
      font-size:13px;
      line-height:1.85
    }
    .legal-article h2 {
      font-size:22px
    }
    .legal-article h3 {
      font-size:18px
    }
    .legal-popup-page {
      padding:12px
    }
    .legal-popup-page .legal-article {
      padding:20px 10px
    }
    .system-message {
      grid-template-columns:1fr;
      margin:10px auto;
      gap:0
    }
    .system-message__visual {
      min-height:180px
    }
    .system-message__content {
      padding:26px
    }
    .system-message h1 {
      font-size:26px
    }
    .paypage-main,.paypage-result {
      margin:30px 18px;
      padding:25px
    }
  }
  @media(prefers-reduced-motion:reduce) {
    html {
      scroll-behavior:auto
    }
    *,*::before,*::after {
      animation-duration:.01ms!important;
      transition-duration:.01ms!important;
      scroll-behavior:auto!important
    }
  }
}
@layer responsive {
  .payment-success-game__visual {
    position:relative
  }
  .payment-success-game__badge {
    position:absolute;
    bottom:15px;
    left:15px;
    padding:6px 10px;
    background:var(--cream);
    border-radius:8px;
    font-size:9px;
    font-weight:800;
    color:var(--green)
  }
  .payment-success-game__copy>strong {
    display:block;
    font-size:25px;
    line-height:1.2;
    letter-spacing:-.04em;
    margin:14px 0
  }
  .payment-success-game__copy>span {
    display:block;
    font-size:13px;
    color:var(--muted)
  }
  .account-table-actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap
  }
  .system-message__progress span {
    width:100%;
    transform:scaleX(0);
    transform-origin:left;
    transition-property:transform;
    transition-timing-function:linear
  }
  .system-message__progress span.is-running {
    transform:scaleX(1)
  }
}