/* Spio Playground: editorial typography, tactile surfaces, lightweight CSS 3D. */
.myspio-design {
    --spio-paper: #fbfcf4;
    --spio-ink: #183c66;
    --spio-line: rgba(24, 60, 102, .16);
    --spio-ease: cubic-bezier(.22, 1, .36, 1);
    --myspio-radius: 24px;
    color: var(--spio-ink);
    background: var(--spio-paper);
}

/* Purchase summary: one compact line with date, warehouse and prominent total. */
.myspio-design .myspio-purchase-summary {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) auto 38px;
    grid-template-areas: none;
    gap: 10px;
    padding: 10px 12px;
}
.myspio-design .myspio-purchase-main {
    display: flex;
    grid-area: auto;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
}
.myspio-design .myspio-purchase-date,
.myspio-design .myspio-purchase-total,
.myspio-design .myspio-receipt-toggle { grid-area: auto; }
.myspio-design .myspio-purchase-date {
    flex: 0 0 auto;
    color: var(--spio-navy);
    font-size: 1rem;
    font-weight: 850;
    white-space: nowrap;
}
.myspio-design .myspio-purchase-shop {
    overflow: hidden;
    flex: 1 1 auto;
    color: #66788a;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.myspio-design .myspio-purchase-total {
    justify-self: end;
    color: var(--spio-navy);
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}
@media (max-width: 40rem) {
    .myspio-design .myspio-purchase-summary {
        grid-template-columns: minmax(0, 1fr) auto 34px;
        grid-template-areas: none;
        gap: 7px;
        padding: 9px 10px;
    }
    .myspio-design .myspio-purchase-main { gap: 6px; }
    .myspio-design .myspio-purchase-main strong,
    .myspio-design .myspio-purchase-main small { white-space: nowrap; }
    .myspio-design .myspio-purchase-total {
        justify-self: end;
        font-size: 1.06rem;
        white-space: nowrap;
    }
}

/* 2.5.0 — Protected QR balance view. */
.myspio-soft-access {
  max-width: 760px;
  margin-inline: auto;
  padding-bottom: 48px;
}

.myspio-soft-header { margin-bottom: 24px; }
.myspio-soft-header h1 { margin: 7px 0 8px; }
.myspio-soft-header p { color: var(--myspio-muted, #617087); }

.myspio-soft-balance {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  margin-bottom: 20px;
  border-radius: 26px 14px 24px 18px;
  isolation: isolate;
  color: #183c66;
  background: linear-gradient(135deg, rgba(134,157,250,.22), rgba(174,217,127,.22) 58%, rgba(255,220,125,.18));
  box-shadow: 0 20px 55px rgba(24,60,102,.10);
}

.myspio-soft-balance::before,
.myspio-soft-balance::after,
.myspio-soft-orb {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 42% 58% 63% 37% / 46% 42% 58% 54%;
  filter: blur(.2px);
  will-change: transform, border-radius;
}
.myspio-soft-balance::before {
  width: 260px; height: 210px; left: -60px; top: -75px;
  background: rgba(134,157,250,.20);
  animation: myspio-soft-liquid-a 13s ease-in-out infinite alternate;
}
.myspio-soft-balance::after {
  width: 230px; height: 190px; right: -55px; bottom: -80px;
  background: rgba(174,217,127,.25);
  animation: myspio-soft-liquid-b 16s ease-in-out infinite alternate;
}
.myspio-soft-orb {
  width: 150px; height: 120px; right: 22%; top: 18%;
  background: rgba(255,255,255,.55);
  animation: myspio-soft-liquid-a 10s ease-in-out -4s infinite alternate-reverse;
}
.myspio-soft-balance > span { font-size: .84rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.myspio-soft-balance > strong { font-size: clamp(4rem, 12vw, 6.6rem); line-height: .95; margin: 12px 0 4px; letter-spacing: -.06em; }
.myspio-soft-balance > small { font-size: 1rem; font-weight: 700; }

.myspio-soft-identity { margin: 20px 0; }
.myspio-soft-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.myspio-soft-section-heading h2 { margin: 4px 0 0; font-size: clamp(1.25rem, 3vw, 1.65rem); }
.myspio-soft-lock { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px 9px 13px 10px; background: rgba(134,157,250,.14); color: #526fdc; font-size: 1.3rem; }
.myspio-soft-identity dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; overflow: hidden; border-radius: 16px 10px 15px 11px; background: rgba(24,60,102,.08); }
.myspio-soft-identity dl div { padding: 14px 16px; background: rgba(255,255,255,.83); min-width: 0; }
.myspio-soft-identity dt { color: var(--myspio-muted, #617087); font-size: .78rem; }
.myspio-soft-identity dd { margin: 3px 0 0; font-weight: 750; overflow-wrap: anywhere; }

.myspio-soft-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; }
.myspio-soft-actions > a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 18px; border: 1px solid rgba(24,60,102,.09); border-radius: 18px 11px 17px 13px; background: rgba(255,255,255,.82); color: #183c66; text-decoration: none; box-shadow: 0 10px 30px rgba(24,60,102,.06); transition: transform .25s ease, box-shadow .25s ease; }
.myspio-soft-actions > a:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(24,60,102,.11); }
.myspio-soft-actions strong, .myspio-soft-actions small { display: block; }
.myspio-soft-actions small { margin-top: 3px; color: var(--myspio-muted, #617087); line-height: 1.35; }
.myspio-soft-actions b { font-size: 1.7rem; font-weight: 400; }
.myspio-soft-action-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 15px 9px 14px 10px; background: rgba(134,157,250,.14); color: #526fdc; font-size: 1.35rem; }
.myspio-soft-login { margin-top: 8px; }
.myspio-soft-security { max-width: 540px; margin: 13px auto 0; text-align: center; color: var(--myspio-muted, #617087); font-size: .82rem; }

@keyframes myspio-soft-liquid-a {
  0% { transform: translate3d(0,0,0) rotate(-4deg) scale(1); border-radius: 42% 58% 63% 37% / 46% 42% 58% 54%; }
  50% { transform: translate3d(24px,16px,0) rotate(7deg) scale(1.08,.94); border-radius: 61% 39% 45% 55% / 38% 60% 40% 62%; }
  100% { transform: translate3d(-8px,28px,0) rotate(1deg) scale(.96,1.07); border-radius: 49% 51% 35% 65% / 59% 37% 63% 41%; }
}
@keyframes myspio-soft-liquid-b {
  0% { transform: translate3d(0,0,0) rotate(5deg); border-radius: 58% 42% 37% 63% / 41% 61% 39% 59%; }
  100% { transform: translate3d(-30px,-18px,0) rotate(-8deg) scale(1.1,.93); border-radius: 35% 65% 55% 45% / 64% 36% 58% 42%; }
}

@media (max-width: 560px) {
  .myspio-soft-balance { min-height: 210px; padding: 25px; border-radius: 22px 11px 21px 14px; }
  .myspio-soft-actions { grid-template-columns: 1fr; }
  .myspio-soft-identity dl { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .myspio-soft-balance::before,
  .myspio-soft-balance::after,
  .myspio-soft-orb { animation: none; }
  .myspio-soft-actions > a { transition: none; }
}

/* 2.6.0 — Institutional offers as tactile, full-screen stories. */
.myspio-offers { margin: 0 0 22px; }
.myspio-offers-heading { margin-bottom: 11px; }
.myspio-offers-heading p { margin: 0; color: #52647b; font-size: .83rem; font-weight: 700; letter-spacing: .015em; }
.myspio-story-rail { display: flex; gap: 13px; overflow-x: auto; padding: 3px 2px 10px; scrollbar-width: none; scroll-snap-type: x proximity; }
.myspio-story-rail::-webkit-scrollbar { display: none; }
.myspio-story-trigger { flex: 0 0 78px; display: grid; gap: 7px; justify-items: center; border: 0; padding: 0; background: none; color: #183c66; font: inherit; cursor: pointer; scroll-snap-align: start; }
.myspio-story-trigger > span:last-child { width: 100%; min-height: 2.5em; overflow: hidden; font-size: .72rem; font-weight: 700; line-height: 1.22; text-align: center; }
.myspio-story-ring { width: 72px; height: 72px; padding: 3px; border-radius: 50%; background: linear-gradient(145deg, #869dfa, #aeda7f 55%, #ffdc7d); box-shadow: 0 7px 18px rgba(24,60,102,.12); transition: transform .25s ease; }
.myspio-story-ring img { width: 100%; height: 100%; display: block; object-fit: cover; border: 3px solid #fff; border-radius: inherit; background: #eef2f6; }
.myspio-story-trigger:hover .myspio-story-ring, .myspio-story-trigger:focus-visible .myspio-story-ring { transform: scale(1.06) rotate(-2deg); }

body.myspio-story-open { overflow: hidden; }
html body > .myspio-story-viewer { position: fixed !important; z-index: 2147483647 !important; inset: 0 !important; display: grid; place-items: center; padding: 42px 72px 24px; color: #fff; background: rgba(8,18,34,.94); backdrop-filter: blur(16px); }
.myspio-story-viewer[hidden] { display: none !important; }
.myspio-story-progress { position: absolute; z-index: 3; top: max(13px, env(safe-area-inset-top)); left: 50%; width: min(720px, calc(100% - 88px)); display: flex; gap: 5px; transform: translateX(-50%); }
.myspio-story-progress i { height: 3px; flex: 1; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.28); }
.myspio-story-progress b { display: block; width: 0; height: 100%; background: #fff; }
.myspio-story-progress i.is-complete b { width: 100%; }
.myspio-story-progress i.is-current b { animation: myspio-story-progress 7s linear forwards; }
.myspio-story-close { position: absolute; z-index: 5; top: max(25px, calc(env(safe-area-inset-top) + 12px)); right: max(20px, env(safe-area-inset-right)); width: 45px; height: 45px; border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font: 300 2rem/1 var(--spio-body); cursor: pointer; }
.myspio-story-viewport { position: relative; width: min(980px, 100%); height: min(760px, calc(100vh - 78px)); margin-inline: auto; overflow: hidden; perspective: 1200px; }
.myspio-story-slides { display: flex; height: 100%; touch-action: pan-y pinch-zoom; }
.myspio-story-slide { position: relative; flex: 0 0 100%; min-width: 0; height: 100%; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); overflow: hidden; border-radius: 28px 16px 26px 19px; background: #fff; color: #183c66; box-shadow: 0 35px 90px rgba(0,0,0,.34); transform-origin: center; backface-visibility: hidden; opacity: .72; scale: .965; transition: opacity .28s ease, scale .28s ease; }
.myspio-story-slide.is-selected { opacity: 1; scale: 1; }
.myspio-story-media { min-height: 0; overflow: hidden; background: #e9edf2; }
.myspio-story-media img, .myspio-story-media video { width: 100%; height: 100%; display: block; object-fit: cover; }
.myspio-story-copy { position: relative; overflow-y: auto; padding: clamp(28px, 5vw, 54px); }
.myspio-story-copy h3 { margin: 10px 0 14px; font-size: clamp(1.75rem, 4vw, 3rem); line-height: .98; }
.myspio-story-description { color: #53647a; line-height: 1.55; }
.myspio-story-description p { margin: 0 0 12px; }
.myspio-story-discount { display: inline-flex; padding: 7px 10px; border-radius: 12px 7px 11px 8px; background: #e8f6b7; color: #315d13; font-weight: 850; }
.myspio-story-price { display: flex; align-items: baseline; gap: 12px; margin: 18px 0; }
.myspio-story-price strong { font-size: clamp(2rem, 4vw, 3.2rem); color: #183c66; }
.myspio-story-price del { color: #7d8795; }
.myspio-story-copy details { margin: 18px 0; padding-top: 15px; border-top: 1px solid rgba(24,60,102,.1); }
.myspio-story-copy summary { font-weight: 750; cursor: pointer; }
.myspio-story-nav { position: absolute; z-index: 4; top: 50%; width: 48px; height: 64px; border: 0; border-radius: 17px 10px 16px 12px; background: rgba(255,255,255,.14); color: #fff; font: 300 2.4rem/1 var(--spio-body); transform: translateY(-50%); cursor: pointer; }
.myspio-story-nav.is-prev { left: 14px; }
.myspio-story-nav.is-next { right: 14px; }

@keyframes myspio-story-progress { to { width: 100%; } }

@media (max-width: 720px) {
  .myspio-design.myspio-portal-page #content-area,
  .myspio-design.myspio-portal-page #main-content > .container { padding-top: 0 !important; margin-top: 0 !important; }
  .myspio-design.myspio-is-authenticated .myspio-app { padding-top: 0; }
  .myspio-story-viewer { padding: 42px 0 0; align-items: stretch; }
  .myspio-story-progress { width: calc(100% - 84px); }
  html body > .myspio-story-viewer .myspio-story-viewport {
	position: absolute !important;
	top: 42px;
	left: 50% !important;
	right: auto !important;
    width: min(430px, calc(100vw - 32px)) !important;
    max-width: 430px;
    height: calc(100vh - 58px);
    height: calc(100dvh - 58px);
	margin: 0 !important;
	transform: translateX(-50%) !important;
  }

  html body > .myspio-story-viewer .myspio-story-slides,
  html body > .myspio-story-viewer .myspio-story-slide {
	margin-right: 0 !important;
	margin-left: 0 !important;
  }
  .myspio-story-slide { grid-template-columns: 1fr; grid-template-rows: minmax(42%, 55vh) minmax(0, 1fr); border-radius: 24px 24px 0 0; }
  .myspio-story-copy { padding: 24px 22px calc(28px + env(safe-area-inset-bottom)); }
  .myspio-story-copy h3 { font-size: clamp(1.65rem, 7vw, 2.35rem); }
  .myspio-story-nav { top: 31%; width: 42px; height: 58px; background: rgba(8,18,34,.35); }
  .myspio-story-nav.is-prev { left: 8px; }
  .myspio-story-nav.is-next { right: 8px; }
  .myspio-story-close { top: max(5px, env(safe-area-inset-top)); right: 9px; width: 36px; height: 36px; font-size: 1.65rem; }
}

/* 3.2 — The physical mySpio Card becomes the visual signature of the portal. */
.myspio-design .myspio-brand-card-art {
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: 24px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    perspective: none;
    transform: none;
}

.myspio-design .myspio-brand-card-art img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    animation: none;
}

.myspio-design .myspio-brand-card-blob {
    position: absolute;
    z-index: 0;
    display: block;
    pointer-events: none;
    filter: blur(.2px);
    transform: translateZ(-12px);
}

.myspio-design .myspio-brand-card-blob.is-one {
    top: -14%;
    right: -13%;
    width: 47%;
    aspect-ratio: 1;
    border-radius: 61% 39% 52% 48% / 45% 58% 42% 55%;
    background: rgba(159,214,58,.24);
    animation: myspio-liquid-one 10s ease-in-out infinite alternate;
}

.myspio-design .myspio-brand-card-blob.is-two {
    bottom: -14%;
    left: -12%;
    width: 42%;
    aspect-ratio: 1.25;
    border-radius: 43% 57% 68% 32% / 58% 38% 62% 42%;
    background: rgba(134,157,250,.22);
    animation: myspio-liquid-two 12s ease-in-out infinite alternate;
}

.myspio-design .myspio-digital-card {
    isolation: isolate;
    aspect-ratio: 1.568 / 1;
    min-height: 0;
    padding: clamp(20px, 4vw, 30px);
    border-radius: 25px;
    background: #52bce0;
    color: #fff;
    box-shadow: 0 25px 54px -30px rgba(24,60,102,.72);
    transform: translate3d(0, var(--spio-scroll-y, 0), 0) rotateX(var(--spio-rx, var(--spio-scroll-rx, 0deg))) rotateY(var(--spio-ry, var(--spio-scroll-ry, 0deg)));
    transform-style: preserve-3d;
}

.myspio-design .myspio-digital-card::before,
.myspio-design .myspio-digital-card::after {
    display: none;
}

.myspio-design .myspio-pvc-surface {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.myspio-design .myspio-pvc-surface::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(105deg, rgba(20,61,104,.18), transparent 38%, rgba(255,255,255,.08));
}

.myspio-design .myspio-pvc-surface img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.myspio-design .myspio-digital-card .myspio-card-number {
    position: absolute;
    z-index: 2;
    top: clamp(16px, 4vw, 28px);
    left: clamp(16px, 4vw, 28px);
    width: fit-content;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 13px;
    background: rgba(15,58,101,.38);
    color: #fff;
    box-shadow: 0 10px 24px -18px rgba(0,0,0,.7);
    backdrop-filter: blur(10px);
}

.myspio-design .myspio-digital-card .myspio-card-number span {
    font-size: .58rem;
    letter-spacing: .12em;
}

.myspio-design .myspio-digital-card .myspio-card-number strong {
    font: 800 clamp(1rem, 3.8vw, 1.55rem)/1.05 "Right Grotesk", sans-serif;
    letter-spacing: .01em;
}

.myspio-design .myspio-digital-card .myspio-barcode-wrap {
    position: absolute;
    z-index: 2;
    left: clamp(16px, 4vw, 28px);
    bottom: clamp(16px, 4vw, 28px);
    width: min(48%, 300px);
    min-height: 54px;
    margin: 0;
    padding: 5px 9px;
    border: 0;
    border-radius: 10px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 12px 24px -18px rgba(15,41,72,.75);
}

.myspio-design .myspio-digital-card .myspio-barcode {
    height: 44px;
}

.myspio-design .myspio-digital-card .myspio-card-points {
    right: clamp(16px, 4vw, 28px);
    bottom: clamp(16px, 4vw, 28px);
    min-width: 39%;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 15px;
    background: rgba(255,255,255,.86);
    color: #183c66;
    box-shadow: 0 12px 25px -20px rgba(15,41,72,.8);
    backdrop-filter: blur(12px);
}

.myspio-design .myspio-digital-card .myspio-card-points > span,
.myspio-design .myspio-digital-card .myspio-card-points > small {
    color: #183c66;
}

.myspio-design .myspio-digital-card .myspio-card-refresh button {
    background: rgba(255,255,255,.94);
}

@keyframes myspio-card-breathe {
    0%, 100% { transform: translate3d(0,0,24px); }
    50% { transform: translate3d(0,-5px,28px); }
}

@keyframes myspio-liquid-one {
    from { transform: translate3d(-5px,2px,-12px) rotate(-4deg) scale(.96); border-radius: 61% 39% 52% 48% / 45% 58% 42% 55%; }
    to { transform: translate3d(8px,-7px,-12px) rotate(8deg) scale(1.05); border-radius: 43% 57% 35% 65% / 61% 40% 60% 39%; }
}

@keyframes myspio-liquid-two {
    from { transform: translate3d(2px,-2px,-12px) rotate(3deg) scale(.98); }
    to { transform: translate3d(-9px,8px,-12px) rotate(-9deg) scale(1.07); }
}

@media (max-width: 620px) {
    .myspio-design .myspio-brand-card-art { margin-top: 18px; }
    .myspio-design .myspio-digital-card { border-radius: 20px; }
    .myspio-design .myspio-digital-card .myspio-card-number { padding: 6px 9px; border-radius: 10px; }
    .myspio-design .myspio-digital-card .myspio-barcode-wrap { min-height: 44px; padding: 4px 7px; }
    .myspio-design .myspio-digital-card .myspio-barcode { height: 36px; }
    .myspio-design .myspio-digital-card .myspio-card-points { padding: 7px 9px; border-radius: 12px; }
    .myspio-design .myspio-digital-card .myspio-card-points strong { font-size: clamp(1.45rem, 7vw, 2rem); }
}

/* Compact receipt-style purchase history. Keep the date primary and the store secondary. */
.myspio-design .myspio-purchase { border-radius: 16px; box-shadow: 0 7px 20px rgba(24,60,102,.055); }
.myspio-design .myspio-purchase-summary {
    min-height: 0;
    grid-template-columns: minmax(0,1fr) auto 38px;
    grid-template-areas: none;
    gap: 10px;
    padding: 10px 12px;
}
.myspio-design .myspio-purchase-main,
.myspio-design .myspio-purchase-date,
.myspio-design .myspio-purchase-total,
.myspio-design .myspio-receipt-toggle { grid-area: auto; }
.myspio-design .myspio-purchase-date { color: var(--spio-navy); font-size: 1rem; font-weight: 850; }
.myspio-design .myspio-purchase-main small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.myspio-design .myspio-purchase-total { justify-self: auto; white-space: nowrap; }
.myspio-design .myspio-purchase-summary[aria-expanded="true"] { background: rgba(255,253,247,.72); }
@media (max-width: 40rem) {
    .myspio-design .myspio-purchase-summary { grid-template-columns: minmax(0,1fr) auto 34px; grid-template-areas: none; gap: 8px; padding: 9px 10px; }
    .myspio-design .myspio-purchase-main small,
    .myspio-design .myspio-purchase-total { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

@media (prefers-reduced-motion: reduce) {
    .myspio-design .myspio-brand-card-art,
    .myspio-design .myspio-digital-card { transform: none !important; transition: none; }
    .myspio-design .myspio-brand-card-art img,
    .myspio-design .myspio-brand-card-blob { animation: none !important; }
}

/* 2.7 — Compact stories, direct points refresh and conditional profile data. */
.myspio-story-slide { user-select: none; }
.myspio-story-media img { -webkit-user-drag: none; }
.myspio-story-media { position: relative; }
.myspio-story-media .myspio-story-discount {
    position: absolute;
    z-index: 2;
    top: 18px;
    left: 18px;
    box-shadow: 0 8px 24px rgba(24,60,102,.18);
}
.myspio-story-copy h3 {
    font-size: clamp(1.3rem, 2.8vw, 2rem);
    line-height: 1.04;
}
.myspio-story-expiry {
    display: inline-grid;
    gap: 2px;
    margin: 5px 0 16px;
    padding: 10px 13px;
    border-radius: 13px 8px 12px 9px;
    background: rgba(134,157,250,.12);
    color: #183c66;
}
.myspio-story-expiry span { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.myspio-story-expiry strong { font-size: .95rem; }
.myspio-design .myspio-card-refresh {
    top: auto;
    right: clamp(112px, 16vw, 148px);
    bottom: clamp(18px, 4vw, 28px);
}
.myspio-design .myspio-card-refresh button { min-height: 38px; padding: 7px 11px; }
.myspio-design .myspio-card-refresh svg { display: block; flex: 0 0 17px; }
[data-myspio-edd-field][hidden] { display: none !important; }
.myspio-pregnancy-check { margin-top: 0 !important; }

@media (max-width: 619px) {
    .myspio-story-media .myspio-story-discount { top: 13px; left: 13px; }
    .myspio-story-copy h3 { font-size: 1.35rem; }
    .myspio-design .myspio-card-refresh {
        top: auto;
        right: 102px;
        bottom: 17px;
    }
    .myspio-design .myspio-card-refresh button { min-width: 0; padding: 7px 9px; font-size: .7rem; }
    .myspio-design .myspio-card-refresh button span {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        clip-path: none;
        white-space: nowrap;
    }
}

/* 3.0 — Error visibility, compact points refresh, and touch-first offer cards. */
.myspio-design .myspio-async-status {
    scroll-margin-top: 20px;
}

.myspio-design .myspio-card-points {
    grid-template-columns: 36px auto;
    column-gap: 8px;
    align-items: center;
}

.myspio-design .myspio-card-points > span,
.myspio-design .myspio-card-points > small {
    grid-column: 1 / -1;
    justify-self: end;
}

.myspio-design .myspio-card-points > strong {
    grid-column: 2;
    grid-row: 2;
}

.myspio-design .myspio-card-points .myspio-card-refresh {
    position: static;
    grid-column: 1;
    grid-row: 2;
    margin: 0;
}

.myspio-design .myspio-card-points .myspio-card-refresh button {
    display: grid;
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.76);
}

.myspio-design .myspio-card-points .myspio-card-refresh svg {
    width: 17px;
    height: 17px;
}

@media (pointer: coarse), (max-width: 719px) {
    .myspio-story-viewport.swiper {
        contain: layout paint;
    }

    .myspio-story-slide.swiper-slide {
        will-change: transform;
        backface-visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
  .myspio-story-progress i.is-current b { animation: none; width: 100%; }
  .myspio-story-ring { transition: none; }
}

.myspio-design :where(a, button, input, select):focus-visible {
    outline: 3px solid var(--spio-ink);
    outline-offset: 4px;
}
.myspio-design :is(.myspio-points-card, .myspio-support-hero, .myspio-bottom-nav) :focus-visible {
    outline-color: var(--spio-ink);
}
.myspio-design .myspio-purchase-summary:focus-visible {
    outline: 3px solid var(--spio-ink);
    outline-offset: -5px;
    border-radius: 16px;
}

/* Respect Divi's logo, navigation, Theme Builder and inline design settings. */
.myspio-design #main-header {
    box-shadow: 0 1px 0 var(--spio-line);
}
.myspio-design #top-menu > li > a {
    transition: opacity .2s, color .2s;
}
.myspio-design #top-menu > li.current-menu-item > a {
    text-decoration: underline;
    text-decoration-color: var(--spio-lime);
    text-decoration-thickness: 3px;
    text-underline-offset: 7px;
}
.myspio-design #main-footer {
    border-top: 1px solid var(--spio-line);
}
.myspio-design.spio-has-dock #page-container,
.myspio-design:has(.myspio-bottom-nav) #page-container {
    padding-bottom: calc(var(--spio-dock-space, 160px) + env(safe-area-inset-bottom, 0px));
}
html:has(.myspio-bottom-nav) {
    scroll-padding-bottom: calc(var(--spio-dock-space, 160px) + env(safe-area-inset-bottom, 0px));
}
.myspio-design .spio-display,
.myspio-design .myspio-app h1,
.myspio-design .myspio-auth-layout h1 {
    font-family: "Right Grotesk", sans-serif;
    font-weight: 900;
    font-size: clamp(3.5rem, 7.8vw, 7rem);
    line-height: .91;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
    text-wrap: balance;
    color: var(--spio-ink);
    background: linear-gradient(108deg, #183c66 0 18%, #508b20 48%, #9fd63a 82%, #72ad27 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.myspio-design .spio-script {
    font-family: var(--spio-display);
    font-weight: 400;
}
.myspio-design .et_pb_button,
.myspio-design .wp-element-button {
    transition: transform .25s var(--spio-ease), box-shadow .25s;
}
.myspio-design .et_pb_button:active,
.myspio-design .wp-element-button:active {
    transform: translateY(2px);
}

.myspio-design.myspio-portal-page #main-content {
    background:
        radial-gradient(ellipse at 6% 8%, rgba(159,214,58,.2) 0 11rem, transparent 11.2rem),
        radial-gradient(ellipse at 96% 34%, rgba(201,238,132,.38) 0 15rem, transparent 15.2rem),
        linear-gradient(145deg, #fff 0%, #fbfcf4 45%, #f3f8df 100%);
    min-height: 65vh;
}
.myspio-design .myspio-app,
.myspio-design .myspio-auth-layout {
    width: min(100%, 1160px);
    padding: clamp(30px, 5vw, 64px) 20px 40px;
}
.myspio-design.myspio-is-authenticated .myspio-app {
    padding-top: clamp(14px, 2.5vw, 30px);
}
.myspio-design .myspio-app > *,
.myspio-design .myspio-auth-layout > * {
    /* The plugin's transform animation otherwise overrides interactive 3D. */
    animation: none;
    min-width: 0;
}
.myspio-design .myspio-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .8125rem;
    letter-spacing: .16em;
    margin-bottom: 18px;
}
.myspio-design .myspio-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: currentColor;
}
.myspio-design .myspio-hero,
.myspio-design .myspio-page-header {
    padding-bottom: 26px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--spio-line);
}
.myspio-design .myspio-hero p,
.myspio-design .myspio-page-header p,
.myspio-design .myspio-auth-intro p {
    font-size: 1.12rem;
    color: #4b6073;
    max-width: 32rem;
}
.myspio-design .myspio-panel {
    background: #fff;
    border: 1px solid var(--spio-line);
    border-radius: 24px;
    box-shadow: 0 4px 0 rgba(24, 60, 102, .045);
}

/* A physical membership card: card number and barcode are the primary data. */
.myspio-design .myspio-points-card {
    container: myspio-card / inline-size;
    min-height: 340px;
    padding: clamp(22px, 5vw, 36px);
    border: 1px solid #d5ed9e;
    border-radius: 32px 32px 92px 32px;
    background:
        radial-gradient(ellipse at var(--spio-light-x, 72%) var(--spio-light-y, 8%), rgba(255,255,255,.78), transparent 45%),
        linear-gradient(135deg, #f7fadf 0%, #e9f6b5 48%, #b9e768 100%);
    box-shadow: 0 7px 0 #7fac2b, 0 24px 45px -18px rgba(76,119,22,.38);
    isolation: isolate;
    color: var(--spio-ink);
}
.myspio-design .myspio-points-card::after {
    display: none;
}
.myspio-design .myspio-card-shape {
    position: absolute;
    z-index: -1;
    border-radius: 46% 54% 65% 35%;
    pointer-events: none;
}
.myspio-design .myspio-card-shape.is-one {
    width: 250px;
    height: 250px;
    right: -68px;
    top: -88px;
    background: rgba(159,214,58,.72);
    rotate: 17deg;
}
.myspio-design .myspio-card-shape.is-two {
    width: 210px;
    height: 125px;
    right: -38px;
    bottom: -45px;
    background: rgba(112,172,36,.28);
    rotate: -13deg;
}
.myspio-design .myspio-card-topline {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.myspio-design .myspio-card-status {
    padding: 6px 10px;
    border: 1px solid rgba(24,60,102,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.55);
    letter-spacing: .08em;
}
.myspio-design .myspio-card-number {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2px;
    margin-top: clamp(30px, 8vw, 52px);
}
.myspio-design .myspio-card-number span,
.myspio-design .myspio-card-points span {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.myspio-design .myspio-card-number strong {
    font: 900 clamp(2.3rem, 11vw, 5.5rem)/.95 "Right Grotesk", sans-serif;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
}
.myspio-design .myspio-barcode-wrap {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    min-height: 68px;
    margin-top: 20px;
    padding: 8px 12px;
    overflow: hidden;
    border: 1px solid rgba(24,60,102,.15);
    border-radius: 12px;
    background: rgba(255,255,255,.82);
}
.myspio-design .myspio-barcode {
    display: none;
    width: 100%;
    height: 54px;
}
.myspio-design .myspio-barcode-wrap.is-ready .myspio-barcode {
    display: block;
}
.myspio-design .myspio-barcode-fallback {
    display: grid;
    min-height: 50px;
    place-items: center;
    font: 700 1rem/1 var(--spio-body);
    letter-spacing: .18em;
}
.myspio-design .myspio-barcode-wrap.is-ready .myspio-barcode-fallback {
    display: none;
}
.myspio-design .myspio-card-points {
    position: absolute;
    z-index: 2;
    right: clamp(22px, 5vw, 36px);
    bottom: clamp(22px, 5vw, 34px);
    display: grid;
    justify-items: end;
}
.myspio-design .myspio-card-points strong {
    font: 900 clamp(2rem, 7vw, 3.25rem)/.9 "Right Grotesk", sans-serif;
    font-variant-numeric: tabular-nums;
}
.myspio-design .myspio-card-points small {
    font-size: .8rem;
    font-weight: 700;
}
.myspio-design .myspio-dashboard {
    container: myspio-dashboard / inline-size;
}
.myspio-design .myspio-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.myspio-design .myspio-action-card {
    border: 1px solid var(--spio-line);
    border-radius: 24px;
    background: var(--spio-soft-lime);
    padding: clamp(17px, 4vw, 24px);
    min-height: 160px;
    box-shadow: 0 3px 0 rgba(24,60,102,.1);
    align-content: space-between;
}
.myspio-design .myspio-action-card.is-purchases {
    background: #d9ef99;
    border-radius: 24px;
}
.myspio-design .myspio-action-card::after {
    content: "\2197";
    position: absolute;
    right: 24px;
    top: 20px;
    font-size: 1.7rem;
    transition: transform .25s var(--spio-ease);
}
.myspio-design .myspio-action-card strong {
    font-size: clamp(1.35rem, 6vw, 2rem);
    letter-spacing: -.035em;
}
.myspio-design .myspio-action-card small {
    min-height: 2.6em;
    line-height: 1.3;
}
.myspio-design .myspio-action-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    margin-bottom: 18px;
    background: transparent;
    border: 1px solid var(--spio-ink);
    color: var(--spio-ink);
}
.myspio-design .myspio-action-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

/* Authentication: an editorial cover next to a quiet, readable form. */
.myspio-design .myspio-auth-layout {
    gap: 32px;
    min-height: 0;
    align-content: start;
}
.myspio-design .myspio-auth-intro::after {
    display: none;
}
.myspio-design .myspio-brand-mark {
    display: none; /* The actual brand logo remains in Divi's header. */
}
.myspio-design .myspio-auth-card {
    padding: clamp(22px, 3.5vw, 42px);
    border-top: 5px solid var(--spio-lime);
    box-shadow: 0 18px 50px -30px rgba(24,60,102,.35);
    align-self: center;
}
.myspio-design .myspio-form {
    gap: 22px;
}
.myspio-design .myspio-form label {
    font-size: .95rem;
    min-width: 0;
}
.myspio-design .myspio-form label small {
    font-size: .875rem;
    line-height: 1.4;
    font-weight: 400;
    color: #506477;
}
.myspio-design .myspio-pin-row {
    /* Use the form's actual width, including enlarged text, not viewport width. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    align-items: end;
}
.myspio-design .myspio-form input,
.myspio-design .myspio-form select {
    border: 1px solid #acb9c7;
    background: #f8fafb;
    border-radius: 12px;
    min-height: 56px;
    font-size: 1rem;
    color: var(--spio-ink);
}
.myspio-design .myspio-form input:focus,
.myspio-design .myspio-form select:focus {
    background: #fff;
    border-color: var(--spio-ink);
    box-shadow: 0 0 0 4px rgba(159,214,58,.22);
}
.myspio-design .myspio-form input[name="pin"],
.myspio-design .myspio-form input[name="pin_confirm"] {
    font-size: 1.45rem;
    letter-spacing: .22em;
}
.myspio-design .myspio-button {
    min-height: 56px;
    padding: 15px 24px;
    border: 1px solid var(--spio-ink);
    border-radius: 14px;
    box-shadow: 0 4px 0 var(--spio-ink);
    font-weight: 700;
    transition: transform .2s var(--spio-ease), box-shadow .2s, background .2s;
}
.myspio-design .myspio-button:hover {
    background: #b8e861;
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--spio-ink);
}
.myspio-design .myspio-button:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--spio-ink);
}
.myspio-design .myspio-button.is-secondary {
    background: #fff;
    box-shadow: 0 3px 0 #d3dbe3;
}
.myspio-design .myspio-button:disabled {
    cursor: wait;
    opacity: .65;
    transform: none;
    box-shadow: none;
}
.myspio-design .myspio-auth-links {
    flex-wrap: wrap;
    gap: 8px 20px;
}
.myspio-design .myspio-auth-links a,
.myspio-design .myspio-auth-switch a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.myspio-design .myspio-phone-hint {
    flex-wrap: wrap;
}
.myspio-design .myspio-form-help {
    color: #506477;
}
.myspio-design :is(.myspio-text-link, .myspio-link-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 10px 4px;
    line-height: 1.4;
    text-align: center;
}
.myspio-design :is(.myspio-auth-links, .myspio-auth-switch) a {
    min-width: 44px;
}
.myspio-design :is(.myspio-purchase-date, .myspio-purchase-main small, .myspio-product-row small,
    .myspio-readonly-row small, .myspio-phone-hint span, .myspio-card-recognized small) {
    color: #506477;
    font-size: .875rem;
    line-height: 1.4;
}
.myspio-design .myspio-refresh-row {
    color: #506477;
    flex-wrap: wrap;
}

.myspio-design .myspio-points-stage {
    border-radius: 28px;
    background:
        radial-gradient(circle at 86% 18%, rgba(255,255,255,.68) 0 4.2rem, transparent 4.3rem),
        linear-gradient(145deg, #e9f6b5, #b8e564);
    min-height: 370px;
    border: 1px solid #c7e68b;
    box-shadow: 0 6px 0 #7eac2b;
    perspective: 1000px;
    padding: 32px 22px 24px;
    gap: 28px;
}
.myspio-design .myspio-points-disc {
    width: min(100%, 260px);
    height: 240px;
    border-radius: 50%;
    border: 2px solid #d7f39d;
    background: linear-gradient(135deg, #ceef94, var(--spio-lime));
    box-shadow: 2px 3px 0 #81b332, 5px 7px 0 #6e9d28, 9px 12px 0 #5e8a20, 15px 25px 35px rgba(0,0,0,.2);
    transform: rotateY(-12deg) rotateZ(-8deg);
    min-width: 0;
    max-width: 100%;
}
.myspio-design .myspio-points-disc strong {
    font-size: clamp(3.3rem, 10vw, 5.5rem);
    font-weight: 900;
}
.myspio-design .myspio-points-stage > p {
    color: var(--spio-ink);
    /* Keep the caption below the 3D object's transformed bounds. */
    position: relative;
    inset: auto;
    margin: 0;
    z-index: 1;
    max-width: 36rem;
    font-size: .9375rem;
    overflow-wrap: anywhere;
    background: rgba(255,255,255,.72);
    padding: 12px;
    border-radius: 12px;
}
.myspio-design .myspio-info-strip,
.myspio-design .myspio-security-panel {
    flex-wrap: wrap;
}
.myspio-design .myspio-purchase {
    border-radius: 18px;
    box-shadow: 0 3px 0 rgba(24,60,102,.05);
}
.myspio-design .myspio-purchase-summary {
    min-height: 90px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "date chevron" "shop total";
    gap: 8px 14px;
}
.myspio-design .myspio-purchase-date {
    grid-area: date;
}
.myspio-design .myspio-purchase-main {
    grid-area: shop;
}
.myspio-design .myspio-purchase-total {
    grid-area: total;
}
.myspio-design .myspio-chevron {
    grid-area: chevron;
    justify-self: end;
}
.myspio-design .myspio-purchase-summary[aria-expanded="true"] {
    background: var(--spio-cream);
}
.myspio-design .myspio-product-row {
    overflow-wrap: anywhere;
}
.myspio-design .myspio-empty-state {
    padding: 55px 24px;
    border-style: dashed;
    box-shadow: none;
}
.myspio-design .myspio-support-hero {
    border-radius: 28px;
    padding: clamp(24px, 4vw, 44px);
    background: linear-gradient(135deg, #c9ed83, #96d43a);
    color: var(--spio-ink);
    box-shadow: 0 6px 0 #75a526;
}
.myspio-design .myspio-support-hero :is(h2, p, .myspio-eyebrow) {
    color: var(--spio-ink);
}
.myspio-design .myspio-support-bubble {
    border-radius: 18px 18px 18px 4px;
    box-shadow: 4px 4px 0 #76aa2d;
    transform: rotate(-8deg);
}
.myspio-design .myspio-help-number {
    background: transparent;
    border: 1px solid var(--spio-line);
    border-radius: 50%;
}
.myspio-design .myspio-help-grid .myspio-panel:nth-child(2) {
    background: #dff0aa;
}
.myspio-design .myspio-help-grid .myspio-panel:nth-child(3) {
    background: var(--spio-soft-lime);
}
.myspio-design .myspio-bottom-nav {
    left: 12px;
    right: 12px;
    width: auto;
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    max-width: 460px;
    padding: 7px;
    border-radius: 23px;
    border: 1px solid #c4df88;
    background: rgba(247,250,223,.97);
    box-shadow: 0 12px 35px -12px rgba(74,112,24,.38);
    transform: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.myspio-design .myspio-bottom-nav a {
    color: var(--spio-ink);
    font-size: .8125rem;
    min-width: 0;
    padding: 8px 4px;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
    transition: background .2s, color .2s;
}
.myspio-design .myspio-bottom-nav a.is-active {
    background: var(--spio-lime);
    color: var(--spio-ink);
    box-shadow: inset 0 1px 0 #d2f299;
}
.myspio-design .myspio-bottom-nav a:hover:not(.is-active) {
    background: #e2f2b6;
}
.myspio-design .myspio-bottom-nav svg {
    transition: transform .25s var(--spio-ease);
}
.myspio-design .myspio-bottom-nav a:hover svg {
    transform: translateY(-3px);
}
/* Large text needs document flow instead of layered card and fixed-dock geometry. */
@container myspio-card (max-width: 36em) {
    .myspio-design .myspio-card-points {
        position: relative;
        right: auto;
        bottom: auto;
        justify-items: start;
        width: fit-content;
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid rgba(24,60,102,.18);
    }
}
@container myspio-dashboard (max-width: 20em) {
    .myspio-design .myspio-action-grid {
        grid-template-columns: 1fr;
    }
    .myspio-design .myspio-action-card {
        min-height: 0;
    }
}
.myspio-design.spio-dock-reflow #page-container {
    padding-bottom: 0;
}
.myspio-design.spio-dock-reflow .myspio-bottom-nav {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    margin-top: 18px;
}
@media (min-width: 620px) {
    .myspio-design .myspio-app,
    .myspio-design .myspio-auth-layout { padding-inline: 32px; }
}
@media (min-width: 900px) {
    .myspio-design .myspio-auth-layout {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        align-items: center;
        gap: 64px;
    }
    .myspio-design .myspio-dashboard {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        gap: 24px;
    }
    .myspio-design .myspio-dashboard > * { grid-column: 1 / -1; }
    .myspio-design .myspio-dashboard .myspio-hero { margin-bottom: 8px; }
    .myspio-design .myspio-dashboard .myspio-points-card {
        grid-column: 1;
        margin: 0;
        min-height: 375px;
    }
    .myspio-design .myspio-dashboard .myspio-action-grid {
        grid-column: 2;
        grid-template-columns: 1fr;
        margin: 0;
    }
    .myspio-design .myspio-auth-intro h1 { max-width: 9ch; }
}
@media (max-width: 899px) {
    .myspio-design .myspio-auth-layout { grid-template-columns: 1fr; }
    .myspio-design .myspio-auth-intro h1 { max-width: 13ch; }
}
@media (max-width: 380px) {
    .myspio-design .myspio-app,
    .myspio-design .myspio-auth-layout { padding-inline: 14px; }
    .myspio-design.myspio-is-authenticated .myspio-dashboard { padding-top: 0; }
    .myspio-design .myspio-points-card { padding-inline: 20px; }
    .myspio-design .myspio-card-number strong { font-size: clamp(2rem, 10.5vw, 3rem); }
    .myspio-design .myspio-action-card { min-height: 150px; }
    .myspio-design .myspio-purchase-summary {
        grid-template-columns: minmax(0,1fr) auto;
        gap: 8px;
        padding: 12px;
    }
    .myspio-design .myspio-purchase-total { font-size: .9rem; }
}
@media (max-width: 40rem) {
    .myspio-design .myspio-purchase-summary {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "date chevron" "shop shop" "total total";
    }
    .myspio-design .myspio-purchase-main strong,
    .myspio-design .myspio-purchase-main small {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .myspio-design .myspio-purchase-total {
        justify-self: start;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* Progressive enhancement: content is never hidden pending JavaScript. */
@media (prefers-reduced-motion: no-preference) {
    .myspio-design:not(.spio-motion-off) .spio-enter {
        animation: spio-arrive .65s var(--spio-ease) both;
        animation-delay: var(--spio-delay, 0ms);
    }
    .myspio-design:not(.spio-motion-off) .spio-tilt {
        transform:
            perspective(1000px)
            translateY(var(--spio-scroll-y, 0))
            rotateX(calc(var(--spio-rx, 0deg) + var(--spio-scroll-rx, 0deg)))
            rotateY(calc(var(--spio-ry, 0deg) + var(--spio-scroll-ry, 0deg)));
        transition: transform .3s var(--spio-ease), box-shadow .3s;
    }
}
@media (hover: hover) and (pointer: fine) {
    .myspio-design:not(.spio-motion-off) .myspio-action-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 0 rgba(24,60,102,.1);
    }
    .myspio-design:not(.spio-motion-off) .myspio-action-card:hover::after {
        transform: translate(3px,-3px);
    }
}
@keyframes spio-arrive {
    from { opacity: .2; translate: 0 18px; }
    to { opacity: 1; translate: 0 0; }
}
.myspio-design.spio-motion-off :is(.myspio-app, .myspio-auth-layout) *,
.myspio-design.spio-motion-off :is(.myspio-app, .myspio-auth-layout) *::after {
    animation: none !important;
    transition: none !important;
}
.myspio-design.spio-motion-off .spio-tilt,
.myspio-design.spio-motion-off .myspio-action-card:hover,
.myspio-design.spio-motion-off .myspio-button:hover {
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .myspio-design :is(.myspio-app, .myspio-auth-layout) *,
    .myspio-design :is(.myspio-app, .myspio-auth-layout) *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
    .myspio-design .spio-tilt,
    .myspio-design .myspio-action-card:hover,
    .myspio-design .myspio-button:hover { transform: none; }
}

/* 2.2.0 — Soft bento language inspired by contemporary wellbeing apps. */
.myspio-design {
    --spio-soft-shadow: 0 18px 46px -32px rgba(24, 60, 102, .32),
        0 2px 10px rgba(24, 60, 102, .06);
    --spio-card-radius: clamp(22px, 4vw, 32px);
}

.myspio-design.myspio-portal-page #main-content {
    background:
        radial-gradient(ellipse at -4% 7%, rgba(159,214,58,.18) 0 13rem, transparent 13.2rem),
        radial-gradient(ellipse at 104% 46%, rgba(201,238,132,.32) 0 17rem, transparent 17.2rem),
        linear-gradient(155deg, #fff 0%, #fbfcf4 52%, #f4f8e7 100%);
}

.myspio-design .myspio-app h1,
.myspio-design .myspio-auth-layout h1 {
    font-size: clamp(2.75rem, 6.3vw, 5.35rem);
    line-height: .94;
}

.myspio-design .myspio-hero,
.myspio-design .myspio-page-header {
    padding-bottom: clamp(18px, 3vw, 28px);
    margin-bottom: clamp(18px, 3vw, 30px);
}

.myspio-design .myspio-panel,
.myspio-design .myspio-auth-card,
.myspio-design .myspio-profile-form,
.myspio-design .myspio-security-panel,
.myspio-design .myspio-purchase {
    border-color: rgba(24, 60, 102, .11);
    border-radius: var(--spio-card-radius);
    box-shadow: var(--spio-soft-shadow);
}

.myspio-design .myspio-points-card {
    min-height: 328px;
    border-radius: 38px 38px 82px 38px;
    box-shadow: 0 5px 0 #7fac2b, 0 24px 50px -27px rgba(76,119,22,.5);
}

.myspio-design .myspio-card-shape.is-one {
    width: 225px;
    height: 205px;
    right: -54px;
    top: -66px;
    border-radius: 42% 58% 64% 36% / 46% 38% 62% 54%;
}

.myspio-design .myspio-card-shape.is-two {
    width: 225px;
    height: 118px;
    right: -46px;
    bottom: -36px;
    border-radius: 62% 38% 48% 52% / 58% 55% 45% 42%;
}

.myspio-design .myspio-barcode-wrap {
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.myspio-design .myspio-action-grid {
    gap: clamp(12px, 2vw, 18px);
}

.myspio-design .myspio-action-card {
    overflow: hidden;
    min-height: 172px;
    border-radius: 30px 30px 50px 30px;
    box-shadow: var(--spio-soft-shadow);
}

.myspio-design .myspio-action-card.is-purchases {
    border-radius: 30px 50px 30px 30px;
}

.myspio-design .myspio-action-card::before {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -35px;
    width: 116px;
    height: 88px;
    border-radius: 50%;
    background: rgba(255,255,255,.24);
    pointer-events: none;
}

.myspio-design .myspio-action-icon {
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.68);
    box-shadow: 0 5px 16px rgba(24,60,102,.08);
}

.myspio-design .myspio-form input,
.myspio-design .myspio-form select,
.myspio-design .myspio-readonly-row {
    border-radius: 18px;
}

.myspio-design .myspio-button {
    border-width: 1px;
    border-radius: 18px;
    box-shadow: 0 4px 0 var(--spio-ink), 0 12px 22px -18px rgba(24,60,102,.65);
}

.myspio-design .myspio-points-stage {
    border-radius: 36px 36px 86px 36px;
    box-shadow: var(--spio-soft-shadow);
}

.myspio-design .myspio-points-disc {
    border-radius: 50%;
    box-shadow: 0 0 0 16px rgba(255,255,255,.12), 0 18px 38px -24px rgba(0,0,0,.55);
}

.myspio-design .myspio-purchase {
    overflow: clip;
}

.myspio-design .myspio-support-hero {
    border-radius: 36px 36px 86px 36px;
    box-shadow: 0 20px 44px -30px rgba(24,60,102,.65);
}

.myspio-design .myspio-help-grid .myspio-panel {
    border-radius: 28px 28px 52px 28px;
}

.myspio-design .myspio-bottom-nav {
    padding: 7px;
    border-color: rgba(24,60,102,.12);
    border-radius: 28px;
    background: rgba(251,252,244,.94);
    box-shadow: 0 18px 50px -24px rgba(24,60,102,.48);
}

.myspio-design .myspio-bottom-nav a {
    border-radius: 21px;
    color: var(--spio-ink);
}

.myspio-design .myspio-bottom-nav a.is-active {
    box-shadow: 0 7px 18px -12px rgba(76,119,22,.7);
}

@media (max-width: 619px) {
    .myspio-design .myspio-app,
    .myspio-design .myspio-auth-layout {
        padding-right: 16px;
        padding-left: 16px;
    }

    .myspio-design .myspio-hero p,
    .myspio-design .myspio-page-header p,
    .myspio-design .myspio-auth-intro p {
        font-size: 1rem;
    }

    .myspio-design .myspio-points-card {
        border-radius: 30px 30px 68px 30px;
    }

    .myspio-design .myspio-action-card {
        border-radius: 24px 24px 42px 24px;
    }

    .myspio-design .myspio-action-card.is-purchases {
        border-radius: 24px 42px 24px 24px;
    }
}

/* 2.4.0 — Calm organic motion, rebuilt digital card and async feedback. */
.myspio-design .myspio-bottom-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.myspio-design .myspio-digital-card {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    background: linear-gradient(142deg, #fcfdf5 0%, #f4f8e7 58%, #eaf3d4 100%);
}

.myspio-design .myspio-digital-card::before,
.myspio-design .myspio-digital-card::after {
    display: block;
    position: absolute;
    z-index: 0;
    content: "";
    pointer-events: none;
    filter: blur(1px);
    transform-origin: center;
    border: 0;
    opacity: 1;
}

.myspio-design .myspio-digital-card::before {
    width: 58%;
    aspect-ratio: 1;
    right: -18%;
    top: -42%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 34%, rgba(255,255,255,.48), transparent 32%), rgba(134,157,250,.15);
}

.myspio-design .myspio-digital-card::after {
    width: 50%;
    height: auto;
    aspect-ratio: 1.35;
    right: -11%;
    bottom: -30%;
    border-radius: 50%;
    background: rgba(159,214,58,.1);
}

.myspio-design .myspio-digital-card > * {
    position: relative;
    z-index: 1;
}

.myspio-design .myspio-digital-card .myspio-card-number {
    margin-top: 0;
}

.myspio-design .myspio-card-refresh {
    position: absolute;
    z-index: 3;
    top: clamp(18px, 4vw, 28px);
    right: clamp(18px, 4vw, 28px);
    margin: 0;
}

.myspio-design .myspio-card-refresh button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid rgba(24,60,102,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: var(--spio-ink);
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 22px -16px rgba(24,60,102,.5);
    backdrop-filter: blur(10px);
}

.myspio-design .myspio-card-refresh svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.myspio-design .myspio-profile-extra {
    min-width: 0;
    margin: 4px 0 0;
    padding: 22px 0 0;
    border: 0;
    border-top: 1px solid var(--spio-line);
}

.myspio-design .myspio-profile-extra legend {
    padding: 0 12px 0 0;
    color: var(--spio-ink);
    font-family: "Right Grotesk", sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
}

.myspio-design .myspio-check-row {
    display: flex;
    min-height: 52px;
    grid-column: 1 / -1;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 13px 15px;
    border-radius: 16px;
    background: #f5f7f2;
}

.myspio-design .myspio-check-row input {
    width: 22px;
    min-height: 22px;
    flex: 0 0 22px;
    accent-color: var(--spio-lime);
}

.myspio-async-status:empty {
    display: none;
}

.myspio-async-status {
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 700;
}

.myspio-async-status.is-success {
    background: #edf7dc;
    color: #315d19;
}

.myspio-async-status.is-error {
    background: #fff0f1;
    color: #8a1b30;
}

.myspio-loader[hidden] {
    display: none;
}

.myspio-loader {
    position: fixed;
    z-index: 100000;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 18px;
    background: rgba(251,252,244,.76);
    color: var(--spio-ink);
    backdrop-filter: blur(14px);
}

.myspio-loader-blob {
    position: relative;
    width: 76px;
    height: 76px;
    filter: drop-shadow(0 16px 22px rgba(24,60,102,.12));
}

.myspio-loader-blob i {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: rgba(134,157,250,.78);
    animation: spio-loader-flow 1.45s cubic-bezier(.45,0,.55,1) infinite alternate;
}

.myspio-loader-blob i + i {
    inset: 24px 3px 3px 25px;
    background: rgba(159,214,58,.82);
    animation-delay: -.72s;
}

.myspio-loader strong {
    font-size: .92rem;
    letter-spacing: .02em;
}

.myspio-is-loading {
    overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    .myspio-design:not(.spio-motion-off) .myspio-digital-card::before {
        animation: spio-organic-drift-a 16s cubic-bezier(.45,0,.55,1) infinite alternate;
    }

    .myspio-design:not(.spio-motion-off) .myspio-digital-card::after {
        animation: spio-organic-drift-b 19s cubic-bezier(.45,0,.55,1) -7s infinite alternate;
    }

    .myspio-design:not(.spio-motion-off) .myspio-action-card::before {
        animation: spio-organic-drift-b 18s cubic-bezier(.45,0,.55,1) -4s infinite alternate;
    }

    .myspio-design:not(.spio-motion-off) .myspio-card-refresh button:hover svg {
        transform: rotate(150deg);
        transition: transform .65s var(--spio-ease);
    }
}

@keyframes spio-organic-drift-a {
    from { transform: translate3d(-2%, -3%, 0) scale(1); }
    to { transform: translate3d(-14%, 13%, 0) scale(1.12, .92); }
}

@keyframes spio-organic-drift-b {
    from { transform: translate3d(5%, 3%, 0) scale(.96, 1.04); }
    to { transform: translate3d(-13%, -12%, 0) scale(1.1, .9); }
}

@keyframes spio-loader-flow {
    from { transform: translate3d(-8px, -5px, 0) scale(.86, 1.1); }
    to { transform: translate3d(9px, 8px, 0) scale(1.12, .88); }
}

@media (max-width: 619px) {
    .myspio-design .myspio-digital-card {
        min-height: 0;
        aspect-ratio: 1.586 / 1;
        padding: 18px 20px;
    }

    .myspio-design .myspio-card-refresh {
        top: 14px;
        right: 14px;
    }

    .myspio-design .myspio-card-refresh button {
        min-width: 42px;
        padding: 8px;
    }

    .myspio-design .myspio-card-refresh button span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .myspio-loader-blob i,
    .myspio-design .myspio-digital-card::before,
    .myspio-design .myspio-digital-card::after {
        animation: none !important;
    }
}

@media (max-width: 619px) {
    .myspio-design.spio-dock-reflow .myspio-points-card {
        min-height: 0;
        aspect-ratio: auto;
    }

    .myspio-design.spio-dock-reflow .myspio-card-topline {
        flex-wrap: wrap;
    }

    .myspio-design.spio-dock-reflow .myspio-card-number strong {
        font-size: min(2rem, 12vw);
    }

    .myspio-design.spio-dock-reflow .myspio-barcode-wrap {
        width: 100%;
    }

    .myspio-design.spio-dock-reflow .myspio-card-points {
        position: relative;
        right: auto;
        bottom: auto;
        justify-items: start;
        width: fit-content;
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid rgba(24,60,102,.14);
    }

    .myspio-design.spio-dock-reflow .myspio-bottom-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 2.2.1 — Slow liquid motion for decorative surfaces only. */
@media (prefers-reduced-motion: no-preference) {
    .myspio-design:not(.spio-motion-off) .myspio-card-shape.is-one {
        animation: spio-liquid-one 12s ease-in-out infinite alternate;
        will-change: transform, border-radius;
    }

    .myspio-design:not(.spio-motion-off) .myspio-card-shape.is-two {
        animation: spio-liquid-two 15s ease-in-out -4s infinite alternate;
        will-change: transform, border-radius;
    }

    .myspio-design:not(.spio-motion-off) .myspio-action-card::before {
        animation: spio-liquid-bubble 10s ease-in-out infinite alternate;
    }

    .myspio-design:not(.spio-motion-off) .myspio-action-card:nth-child(2)::before {
        animation-delay: -5s;
        animation-duration: 13s;
    }

    .myspio-design:not(.spio-motion-off) .myspio-points-disc {
        animation: spio-liquid-disc 9s ease-in-out infinite alternate;
        will-change: transform, border-radius;
    }

    .myspio-design:not(.spio-motion-off) .myspio-points-stage::before {
        animation: spio-liquid-stage 17s ease-in-out -7s infinite alternate;
        will-change: transform, border-radius;
    }
}

@keyframes spio-liquid-one {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        border-radius: 42% 58% 64% 36% / 46% 38% 62% 54%;
    }
    48% {
        transform: translate3d(-9px, 7px, 0) scale(1.045, .965);
        border-radius: 57% 43% 38% 62% / 39% 57% 43% 61%;
    }
    100% {
        transform: translate3d(6px, 13px, 0) scale(.97, 1.04);
        border-radius: 36% 64% 53% 47% / 61% 43% 57% 39%;
    }
}

@keyframes spio-liquid-two {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        border-radius: 62% 38% 48% 52% / 58% 55% 45% 42%;
    }
    55% {
        transform: translate3d(-12px, -7px, 0) scale(1.06, .94);
        border-radius: 44% 56% 63% 37% / 46% 35% 65% 54%;
    }
    100% {
        transform: translate3d(7px, -12px, 0) scale(.96, 1.07);
        border-radius: 55% 45% 39% 61% / 64% 51% 49% 36%;
    }
}

@keyframes spio-liquid-bubble {
    from {
        transform: translate3d(0, 0, 0) scale(1);
        border-radius: 50% 44% 58% 42% / 45% 56% 44% 55%;
    }
    to {
        transform: translate3d(-10px, -8px, 0) scale(1.12, .9);
        border-radius: 38% 62% 43% 57% / 61% 39% 58% 42%;
    }
}

@keyframes spio-liquid-disc {
    from {
        transform: rotate(-3deg) translate3d(0, 0, 0) scale(1);
        border-radius: 48% 52% 46% 54% / 51% 45% 55% 49%;
    }
    to {
        transform: rotate(2deg) translate3d(0, -6px, 0) scale(1.025, .985);
        border-radius: 54% 46% 56% 44% / 43% 57% 47% 53%;
    }
}

@keyframes spio-liquid-stage {
    from {
        transform: translate3d(0, 0, 0) scale(1);
        border-radius: 50%;
    }
    to {
        transform: translate3d(18px, -10px, 0) scale(1.08, .94);
        border-radius: 57% 43% 36% 64% / 45% 59% 41% 55%;
    }
}

.myspio-design.spio-motion-off :is(.myspio-card-shape, .myspio-points-disc),
.myspio-design.spio-motion-off :is(.myspio-action-card, .myspio-points-stage)::before {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .myspio-design :is(.myspio-card-shape, .myspio-points-disc),
    .myspio-design :is(.myspio-action-card, .myspio-points-stage)::before {
        animation: none !important;
    }
}

/* 2.3.0 — Quieter palette, regular corners and a true wallet-card ratio. */
.myspio-design {
    --spio-card-radius: 24px;
}

.myspio-design .spio-display,
.myspio-design .myspio-app h1,
.myspio-design .myspio-auth-layout h1 {
    background: linear-gradient(108deg, #869dfa 0%, #718bdc 27%, #75a956 63%, #9fd63a 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.myspio-design.myspio-portal-page #main-content {
    background:
        radial-gradient(ellipse at -4% 7%, rgba(159,214,58,.09) 0 13rem, transparent 13.2rem),
        radial-gradient(ellipse at 104% 46%, rgba(134,157,250,.08) 0 17rem, transparent 17.2rem),
        linear-gradient(155deg, #fff 0%, #fbfcf7 52%, #f8faef 100%);
}

.myspio-design .myspio-panel,
.myspio-design .myspio-auth-card,
.myspio-design .myspio-profile-form,
.myspio-design .myspio-security-panel,
.myspio-design .myspio-purchase,
.myspio-design .myspio-points-card,
.myspio-design .myspio-points-stage,
.myspio-design .myspio-support-hero,
.myspio-design .myspio-help-grid .myspio-panel,
.myspio-design .myspio-action-card,
.myspio-design .myspio-action-card.is-purchases {
    border-radius: var(--spio-card-radius);
}

.myspio-design .myspio-points-card {
    border-color: #dcebbd;
    background:
        radial-gradient(ellipse at var(--spio-light-x, 72%) var(--spio-light-y, 8%), rgba(255,255,255,.88), transparent 48%),
        linear-gradient(135deg, #fbfdef 0%, #f1f8d9 52%, #e2f1b9 100%);
    box-shadow: 0 3px 0 #b7cf82, 0 22px 46px -30px rgba(76,119,22,.35);
}

.myspio-design .myspio-card-shape.is-one {
    background: rgba(159,214,58,.28);
}

.myspio-design .myspio-card-shape.is-two {
    background: rgba(112,172,36,.13);
}

.myspio-design .myspio-action-card {
    background: #f3f8df;
}

.myspio-design .myspio-action-card.is-purchases {
    background: #edf5d4;
}

.myspio-design .myspio-points-stage {
    border-color: #dcebbd;
    background:
        radial-gradient(circle at 86% 18%, rgba(255,255,255,.76) 0 4.2rem, transparent 4.3rem),
        linear-gradient(145deg, #f5f9e4, #deefb4);
    box-shadow: 0 3px 0 #b7cf82, var(--spio-soft-shadow);
}

.myspio-design .myspio-points-disc {
    border-color: #e7f2cd;
    background: linear-gradient(135deg, #e6f3c7, #cce99a);
    box-shadow: 0 0 0 14px rgba(255,255,255,.28), 0 18px 38px -27px rgba(76,119,22,.42);
}

.myspio-design .myspio-support-hero {
    background: linear-gradient(135deg, #eef7d4, #d8eeaa);
    box-shadow: 0 3px 0 #b7cf82, 0 20px 44px -34px rgba(24,60,102,.38);
}

.myspio-design .myspio-help-grid .myspio-panel:nth-child(2) {
    background: #f2f7e4;
}

.myspio-design .myspio-help-grid .myspio-panel:nth-child(3) {
    background: #f6f9ea;
}

@media (max-width: 619px) {
    .myspio-design .myspio-points-card {
        width: 100%;
        min-height: 0;
        aspect-ratio: 1.586 / 1;
        padding: 18px 20px;
    }

    .myspio-design .myspio-card-topline {
        flex-wrap: nowrap;
        gap: 8px;
        font-size: .66rem;
    }

    .myspio-design .myspio-card-status {
        padding: 5px 8px;
    }

    .myspio-design .myspio-card-number {
        margin-top: 19px;
    }

    .myspio-design .myspio-card-number span,
    .myspio-design .myspio-card-points span {
        font-size: .62rem;
    }

    .myspio-design .myspio-card-number strong {
        font-size: clamp(1.9rem, 10.5vw, 2.55rem);
    }

    .myspio-design .myspio-barcode-wrap {
        width: 61%;
        min-height: 43px;
        margin-top: 12px;
        padding: 5px 8px;
        border-radius: 10px;
    }

    .myspio-design .myspio-barcode {
        height: 32px;
    }

    .myspio-design .myspio-barcode-fallback {
        min-height: 31px;
        font-size: .78rem;
    }

    .myspio-design .myspio-card-points {
        position: absolute;
        right: 20px;
        bottom: 18px;
        width: auto;
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
        justify-items: end;
    }

    .myspio-design .myspio-card-points strong {
        font-size: clamp(1.55rem, 8vw, 2.05rem);
    }

    .myspio-design .myspio-card-points small {
        font-size: .67rem;
    }

    .myspio-design .myspio-card-shape.is-one {
        width: 165px;
        height: 145px;
        right: -45px;
        top: -55px;
    }

    .myspio-design .myspio-card-shape.is-two {
        width: 145px;
        height: 76px;
        right: -34px;
        bottom: -28px;
    }
}

/* Keep the 2.4 card treatment above the earlier compatibility layer. */
.myspio-design .myspio-digital-card {
    min-height: 300px;
    background: linear-gradient(142deg, #fcfdf5 0%, #f4f8e7 58%, #eaf3d4 100%);
}

.myspio-design .myspio-digital-card .myspio-card-number {
    margin-top: 0;
}

@media (max-width: 619px) {
    .myspio-design .myspio-digital-card {
        min-height: 0;
        aspect-ratio: 1.586 / 1;
    }

    .myspio-design.spio-dock-reflow .myspio-digital-card {
        aspect-ratio: auto;
    }
}

/* Keep the portal flush with Divi's content area on phones. */
@media (max-width: 720px) {
    .myspio-design.myspio-portal-page #content-area,
    .myspio-design.myspio-portal-page #main-content > .container {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    .myspio-design.myspio-portal-page #content-area .myspio-app,
    .myspio-design.myspio-is-authenticated .myspio-app {
        padding-top: 0 !important;
    }
}

/* Final card control placement after all compatibility layers. */
.myspio-design .myspio-card-refresh {
    top: auto;
    right: clamp(112px, 16vw, 148px);
    bottom: clamp(18px, 4vw, 28px);
}
.myspio-design .myspio-card-refresh button {
    min-height: 38px;
    padding: 7px 11px;
}
.myspio-design .myspio-card-refresh svg {
    display: block;
    flex: 0 0 17px;
    margin: 0;
}
@media (max-width: 619px) {
    .myspio-design .myspio-card-refresh { top: auto; right: 102px; bottom: 17px; }
    .myspio-design .myspio-card-refresh button { min-width: 0; padding: 7px 9px; font-size: .7rem; }
    .myspio-design .myspio-card-refresh button span {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        clip-path: none;
        white-space: nowrap;
    }
}

/* 3.0 — This block stays last so the balance control wins over legacy card rules. */
.myspio-design .myspio-async-status { scroll-margin-top: 20px; }
.myspio-design .myspio-card-points {
    grid-template-columns: 36px auto;
    column-gap: 8px;
    align-items: center;
}
.myspio-design .myspio-card-points > span,
.myspio-design .myspio-card-points > small {
    grid-column: 1 / -1;
    justify-self: end;
}
.myspio-design .myspio-card-points > strong { grid-column: 2; grid-row: 2; }
.myspio-design .myspio-card-points .myspio-card-refresh {
    position: static;
    grid-column: 1;
    grid-row: 2;
    margin: 0;
}
.myspio-design .myspio-card-points .myspio-card-refresh button {
    display: grid;
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.76);
}
.myspio-design .myspio-card-points .myspio-card-refresh svg { width: 17px; height: 17px; }
@media (pointer: coarse), (max-width: 719px) {
    .myspio-story-viewport.swiper { contain: layout paint; }
    .myspio-story-slide.swiper-slide { will-change: transform; backface-visibility: hidden; }
}

/* 3.0.1 — Compact offer copy and an expiry badge over the media. */
.myspio-story-media .myspio-story-expiry {
    position: absolute;
    z-index: 2;
    top: 18px;
    right: 18px;
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 8px;
    align-items: center;
    margin: 0;
    padding: 8px 12px 8px 9px;
    border: 2px solid rgba(134,157,250,.55);
    border-radius: 14px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 10px 28px rgba(24,60,102,.25);
    color: #183c66;
    line-height: 1.05;
}
.myspio-story-media .myspio-story-expiry svg {
    grid-row: 1 / span 2;
    width: 1.05rem;
    height: 1.05rem;
    box-sizing: content-box;
    padding: 6px;
    border-radius: 9px;
    background: rgba(134,157,250,.14);
    fill: none;
    stroke: #869dfa;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}
.myspio-story-media .myspio-story-expiry span {
    color: #6078cc;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.myspio-story-media .myspio-story-expiry strong { font-size: .86rem; font-weight: 850; }
.myspio-story-copy h3 {
    margin: 0 0 8px;
    font-size: clamp(1.05rem, 2.1vw, 1.55rem);
    line-height: 1.08;
}
.myspio-story-price { margin: 0 0 10px; }
.myspio-story-price strong { font-size: clamp(1.4rem, 2.8vw, 2.05rem); }
@media (max-width: 619px) {
    .myspio-story-media .myspio-story-expiry { top: 13px; right: 13px; padding: 7px 10px 7px 7px; }
    .myspio-story-media .myspio-story-expiry strong { font-size: .78rem; }
    .myspio-story-copy h3 { font-size: 1.08rem; }
}

/* 3.1.1 — Keep the four portal destinations fixed and on one compact row. */
.myspio-design .myspio-bottom-nav,
.myspio-design.spio-dock-reflow .myspio-bottom-nav {
    position: fixed;
    z-index: 1000;
    inset: auto 12px max(12px, env(safe-area-inset-bottom, 0px));
    display: grid;
    width: auto;
    max-width: 460px;
    margin: 0 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.myspio-design .myspio-bottom-nav a {
    min-width: 0;
    padding: 6px 2px;
    font-size: .68rem;
    line-height: 1.08;
    overflow: hidden;
    overflow-wrap: normal;
}
.myspio-design .myspio-bottom-nav a span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 374px) {
    .myspio-design .myspio-bottom-nav a { font-size: .62rem; }
}

/* Keep the physical-card surface above every legacy compatibility rule. */
.myspio-design .myspio-digital-card {
    min-height: 0;
    aspect-ratio: 1.568 / 1;
    border-radius: 25px;
    background: #52bce0;
}
@media (max-width: 620px) {
    .myspio-design .myspio-digital-card { min-height: 0; aspect-ratio: 1.568 / 1; border-radius: 20px; }
}

/* 3.2.1 — One composed card: artwork and live data share the same surface. */
.myspio-design .myspio-digital-card {
    display: grid;
    grid-template-columns: minmax(0, 48%) minmax(0, 52%);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "art number"
        "art points"
        "art barcode";
    gap: 0;
    min-height: 290px;
    aspect-ratio: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(24,60,102,.12);
    border-radius: 24px;
    background: linear-gradient(145deg, #52bce0 0%, #52bce0 46%, #9fd63a 155%);
    color: #183c66;
}

.myspio-design .myspio-digital-card .myspio-pvc-surface {
    position: relative;
    grid-area: art;
    inset: auto;
    min-width: 0;
    border-radius: 0;
    background: #52bce0;
}

.myspio-design .myspio-digital-card .myspio-pvc-surface::after {
    background:
        linear-gradient(90deg, transparent 58%, #52bce0 100%),
        linear-gradient(180deg, transparent 0 42%, rgba(82,188,224,.97) 55%, #52bce0 100%);
}

.myspio-design .myspio-digital-card .myspio-pvc-surface img {
    object-fit: cover;
    object-position: 43% center;
    transform: scale(1.22);
    transform-origin: 50% 20%;
}

.myspio-design .myspio-digital-card .myspio-card-number {
    position: relative;
    grid-area: number;
    inset: auto;
    align-self: start;
    width: auto;
    margin: 0;
    padding: clamp(22px, 4vw, 34px) clamp(20px, 4vw, 34px) 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #183c66;
    backdrop-filter: none;
}

.myspio-design .myspio-digital-card .myspio-card-number span {
    color: rgba(24,60,102,.72);
    font-size: .64rem;
}

.myspio-design .myspio-digital-card .myspio-card-number strong {
    font-size: clamp(1.35rem, 3vw, 2.25rem);
}

.myspio-design .myspio-digital-card .myspio-card-points {
    position: relative;
    grid-area: points;
    inset: auto;
    align-self: center;
    justify-self: stretch;
    min-width: 0;
    width: auto;
    margin: 0;
    padding: 6px clamp(20px, 4vw, 34px);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #183c66;
    backdrop-filter: none;
    justify-items: start;
}

.myspio-design .myspio-digital-card .myspio-card-points > span,
.myspio-design .myspio-digital-card .myspio-card-points > small {
    justify-self: start;
}

.myspio-design .myspio-digital-card .myspio-card-points > span { grid-column: 1 / -1; }
.myspio-design .myspio-digital-card .myspio-card-points > small { grid-column: 2; }

.myspio-design .myspio-digital-card .myspio-card-points > strong {
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    line-height: .82;
}

.myspio-design .myspio-digital-card .myspio-card-refresh button {
    border: 1px solid rgba(24,60,102,.14);
    background: rgba(255,255,255,.72);
    box-shadow: 0 8px 18px -14px rgba(24,60,102,.7);
}

.myspio-design .myspio-digital-card .myspio-barcode-wrap {
    position: relative;
    grid-area: barcode;
    inset: auto;
    align-self: end;
    width: auto;
    min-height: 54px;
    margin: 8px clamp(20px, 4vw, 34px) clamp(20px, 4vw, 30px);
    padding: 5px 9px;
    border-radius: 9px;
    background: rgba(255,255,255,.9);
}

@media (max-width: 620px) {
    .myspio-design .myspio-digital-card {
        grid-template-columns: minmax(0, 46%) minmax(0, 54%);
        min-height: 180px;
        aspect-ratio: 1.58 / 1;
        border-radius: 19px;
    }
    .myspio-design .myspio-digital-card .myspio-card-number { padding: 17px 13px 4px; }
    .myspio-design .myspio-digital-card .myspio-card-number strong { font-size: clamp(1rem, 4.7vw, 1.35rem); }
    .myspio-design .myspio-digital-card .myspio-card-points { padding: 2px 13px; }
    .myspio-design .myspio-digital-card .myspio-card-points > strong { font-size: clamp(2rem, 10vw, 2.75rem); }
    .myspio-design .myspio-digital-card .myspio-card-points > span,
    .myspio-design .myspio-digital-card .myspio-card-points > small { font-size: .57rem; }
    .myspio-design .myspio-digital-card .myspio-barcode-wrap {
        min-height: 38px;
        margin: 5px 13px 14px;
        padding: 3px 6px;
    }
    .myspio-design .myspio-digital-card .myspio-barcode { height: 31px; }
    .myspio-design .myspio-digital-card .myspio-card-refresh button {
        width: 30px;
        min-width: 30px;
        height: 30px;
        min-height: 30px;
    }
}

/* Final purchase override: compact single-line date + warehouse, prominent total. */
.myspio-design .myspio-purchase-summary {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) auto 38px;
    grid-template-areas: none;
    gap: 10px;
    padding: 10px 12px;
}
.myspio-design .myspio-purchase-main {
    display: flex;
    grid-area: auto;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
}
.myspio-design .myspio-purchase-date,
.myspio-design .myspio-purchase-total,
.myspio-design .myspio-receipt-toggle { grid-area: auto; }
.myspio-design .myspio-purchase-date {
    flex: 0 0 auto;
    color: var(--spio-navy);
    font-size: 1rem;
    font-weight: 850;
    white-space: nowrap;
}
.myspio-design .myspio-purchase-shop {
    overflow: hidden;
    flex: 1 1 auto;
    color: #66788a;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.myspio-design .myspio-purchase-total {
    justify-self: end;
    color: var(--spio-navy);
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}
@media (max-width: 40rem) {
    .myspio-design .myspio-purchase-summary {
        grid-template-columns: minmax(0, 1fr) auto 34px;
        grid-template-areas: none;
        gap: 7px;
        padding: 9px 10px;
    }
    .myspio-design .myspio-purchase-main { gap: 6px; }
    .myspio-design .myspio-purchase-main strong,
    .myspio-design .myspio-purchase-main small { white-space: nowrap; }
    .myspio-design .myspio-purchase-total {
        justify-self: end;
        font-size: 1.06rem;
        white-space: nowrap;
    }
}
/* Login artwork: plain responsive image with its intrinsic proportions. */
.myspio-design .myspio-login-card-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 24px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter: none;
    object-fit: contain;
    transform: none;
    animation: none;
}
/* Desktop dock contains three visible destinations because the scanner is mobile-only. */
@media (hover: hover) and (pointer: fine) {
    .myspio-design .myspio-bottom-nav,
    .myspio-design.spio-dock-reflow .myspio-bottom-nav {
        width: min(calc(100% - 24px), 350px);
        max-width: 350px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .myspio-design .myspio-bottom-nav .myspio-nav-reader { display: none; }
}