.slide.active {
  animation: none;
  opacity: 1;
}

.offer-card li::before,
.agreement input:checked + span::after {
  content: "\2713";
}

.document-list button {
  color: var(--ink);
}

/* Confirmed home architecture from the latest Meridian home prototype. Automatic live reload enabled. */
.home-scroll {
  padding: 0 12px 92px;
}

.home-assets {
  margin-top: 12px;
  padding: 16px 14px 14px;
  border-radius: 22px;
  background: var(--paper);
}

.home-assets > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 13px;
  border-bottom: 1px solid #e7e9e2;
}

.home-assets > header > span {
  color: #9299a0;
  font-size: 14px;
}

.home-assets > header > span i {
  margin-left: 4px;
  color: #9ca9a3;
  font-size: 11px;
  font-style: normal;
}

.home-assets > header > strong {
  display: flex;
  align-items: center;
  font-size: 25px;
  letter-spacing: -1px;
}

.home-assets > header small {
  margin-left: 4px;
  font-size: 11px;
  letter-spacing: 0;
}

.coin {
  width: 28px;
  height: 28px;
  margin-right: 5px;
  border: 2px solid #e5b94b;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff0a8, #b66e16);
  color: #64410d;
  display: grid;
  place-items: center;
  font-family: Georgia, serif;
  font-size: 16px;
}

.payment-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 18px 1px 15px;
}

.payment-actions button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.payment-actions i {
  height: 27px;
  color: #2eb765;
  font-size: 24px;
  font-style: normal;
  line-height: 1;
}

.payment-actions b {
  font-size: 11px;
}

.asset-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.asset-actions button {
  height: 40px;
  border-radius: 10px;
  background: #efeee8;
  font-size: 11px;
  font-weight: 700;
}

.asset-actions button:first-child {
  background: var(--lime);
}

.home-list-card {
  margin-top: 12px;
  padding: 13px 14px 9px;
  border-radius: 20px;
  background: var(--paper);
}

.home-list-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-list-card h2 {
  margin: 0 0 8px;
  font-size: 17px;
}

.home-list-card h2 span {
  display: inline-block;
  padding: 4px 7px;
  border-radius: 12px;
  background: #f05f59;
  color: #fff;
  font-size: 8px;
  vertical-align: 3px;
}

.home-list-card header button {
  color: #929ca6;
  font-size: 10px;
}

.home-list-row {
  min-height: 53px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
}

.home-list-row + .home-list-row {
  border-top: 1px solid #e4e6df;
}

.home-list-row > i {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #66b876;
  color: #fff;
  font-size: 23px;
  font-style: normal;
}

.home-list-row > .security-icon {
  background: #a5dc4a;
}

.home-list-row > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.home-list-row > span b {
  font-size: 12px;
}

.home-list-row > span small {
  margin-top: 3px;
  overflow: hidden;
  color: #98a2ad;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-list-row > em {
  padding: 8px 9px;
  border-radius: 10px;
  background: var(--lime);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.home-list-row > strong {
  font-size: 10px;
}

.home-list-row > .payer-icon {
  border-radius: 50%;
  background: #cb62a8;
  font-size: 13px;
  font-weight: 800;
}

.home-list-row > .payer-icon.second {
  background: #677ed2;
}

.tabbar {
  height: 66px;
}

.tabbar button {
  font-size: 19px;
}

.tabbar button span {
  font-size: 9px;
}

/* MID editorial detail — premium identity narrative before the offer. */
.detail-scroll {
  padding: 12px 12px 106px;
}

.story-card-v2 {
  height: 334px;
  padding: 18px;
  border: 1px solid #315749;
  border-radius: 24px;
  background:
    radial-gradient(circle at 76% 59%, #c9ff3d 0 5%, transparent 5.4%),
    radial-gradient(circle at 76% 59%, #39765a 0 20%, transparent 20.4%),
    linear-gradient(145deg, #174436 0%, #06261d 56%, #001810 100%);
  box-shadow: 0 16px 34px #00130d80;
}

.story-card-v2::after {
  background:
    repeating-radial-gradient(ellipse at 76% 59%, transparent 0 17px, #d8ffc810 18px 19px),
    linear-gradient(115deg, transparent 60%, #bfff3c0a);
  transform: scale(1.35);
}

.story-card-v2 .story-meta {
  color: #b6cbbf;
  font-size: 7px;
  letter-spacing: 1.35px;
}

.story-brand {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 35px 1fr auto;
  align-items: center;
  margin-top: 13px;
}

.story-brand .mid-logo {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 18px;
}

.story-brand > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  padding-left: 8px;
}

.story-brand b {
  color: #fff;
  font-size: 11px;
}

.story-brand small {
  margin-top: 2px;
  color: #91a99e;
  font-size: 7px;
}

.story-brand > em {
  color: #91a99e;
  font-size: 7px;
  font-style: normal;
  letter-spacing: 1px;
}

.story-card-v2 .story-title {
  margin-top: 18px;
  max-width: 225px;
  font-size: 24px;
  line-height: 1.02;
  letter-spacing: -1px;
}

.story-card-v2 .story-title em {
  display: block;
  margin-top: 3px;
  color: var(--lime);
}

.story-card-v2 .story-copy {
  width: 54%;
  margin-top: 9px;
  color: #aec1b8;
  font-size: 9px;
  line-height: 1.45;
}

.credential-visual {
  position: absolute;
  z-index: 3;
  top: 178px;
  right: 16px;
  bottom: auto;
  width: 138px;
  height: 76px;
  padding: 10px;
  border: 1px solid #bfff4c55;
  border-radius: 12px;
  background: linear-gradient(145deg, #142f27dd, #07150fee);
  box-shadow: 0 14px 28px #00110c99;
  color: #fff;
  text-align: left;
  transform: rotate(-4deg);
}

.credential-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-radial-gradient(ellipse at 90% 40%, transparent 0 9px, #d8ffc812 10px 11px);
}

.credential-visual > * {
  position: relative;
  z-index: 1;
}

.credential-visual small {
  display: block;
  color: #bdd0c6;
  font-size: 5px;
  letter-spacing: 1px;
}

.credential-visual > b {
  display: block;
  margin-top: 5px;
  color: var(--lime);
  font-size: 20px;
}

.credential-visual > i {
  display: block;
  color: #dbe7e0;
  font-size: 7px;
  font-style: normal;
}

.credential-visual > em {
  position: absolute;
  right: 0;
  bottom: -15px;
  color: #82978d;
  font-size: 5px;
  font-style: normal;
  letter-spacing: .7px;
}

.story-card-v2 .story-open {
  right: 18px;
  bottom: 17px;
  left: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 11px;
  border-top: 1px solid #47706366;
}

.story-card-v2 .story-open b {
  color: #e9f1ed;
  font-size: 9px;
}

.story-card-v2 .story-open i {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--lime);
  color: #0b2419;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-style: normal;
}

.identity-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 9px 0;
}

.identity-values article {
  min-width: 0;
  min-height: 62px;
  padding: 10px 8px;
  border: 1px solid #2c5044;
  border-radius: 14px;
  background: #082b21;
  color: #fff;
}

.identity-values i {
  color: var(--lime);
  font-size: 13px;
  font-style: normal;
}

.identity-values span {
  display: flex;
  flex-direction: column;
  margin-top: 5px;
}

.identity-values b {
  font-size: 8px;
}

.identity-values small {
  margin-top: 3px;
  color: #829b90;
  font-size: 6px;
  line-height: 1.3;
}

.offer-card-v2 {
  padding: 17px;
  border-radius: 22px;
}

.offer-card-v2 > header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding-bottom: 14px;
}

.offer-card-v2 > header > div:first-child {
  text-align: left;
}

.offer-card-v2 > header span {
  color: #769022;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.offer-card-v2 h2 {
  margin: 4px 0 2px;
  font-size: 17px;
}

.offer-card-v2 header small {
  color: #899189;
  font-size: 8px;
}

.offer-card-v2 .offer-price {
  text-align: right;
}

.offer-card-v2 .offer-price small {
  display: block;
  font-size: 7px;
}

.offer-card-v2 .offer-price strong {
  color: #5f8e11;
  font-size: 28px;
  letter-spacing: -1px;
}

.invitation-credit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px;
  border-radius: 12px;
  background: #eaf5dc;
}

.invitation-credit span {
  display: flex;
  align-items: center;
}

.invitation-credit i {
  width: 19px;
  height: 19px;
  margin-right: 7px;
  border-radius: 50%;
  background: #78a827;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-style: normal;
}

.invitation-credit b,
.invitation-credit strong {
  font-size: 9px;
}

.offer-card-v2 > .invitation-credit > strong {
  font-size: 11px;
  letter-spacing: 0;
}

.invitation-credit strong {
  color: #608819;
}

.price-detail {
  display: flex;
  justify-content: space-between;
  padding: 10px 2px;
  border-bottom: 1px solid #e0e3da;
  color: #8a918a;
  font-size: 8px;
}

.offer-card-v2 ul {
  padding: 7px 0 0;
  border: 0;
}

.offer-card-v2 li {
  display: flex;
  margin: 0;
  padding: 8px 0;
}

.offer-card-v2 li::before {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 50%;
  background: #edf5e4;
  display: grid;
  place-items: center;
  flex: none;
}

.offer-card-v2 li span {
  display: flex;
  flex-direction: column;
}

.offer-card-v2 li b {
  font-size: 9px;
}

.offer-card-v2 li small {
  margin-top: 2px;
  color: #8b938c;
  font-size: 7px;
}

.offer-card-v2 > p {
  margin: 3px 0 0;
  padding-top: 10px;
  border-top: 1px solid #e1e4dc;
  font-size: 7px;
}

#mid-detail > .sticky {
  padding-top: 18px;
}

#mid-detail > .sticky .primary {
  box-shadow: 0 8px 22px #00130d80;
}

/* V4 — focused first screen with one continuous surface. */
#mid-detail {
  background:
    radial-gradient(circle at 88% 24%, #235b4538, transparent 31%),
    linear-gradient(180deg, #05281e 0%, #001b13 100%);
}

.detail-nav {
  position: relative;
  z-index: 4;
  border-bottom: 0;
  background: transparent;
}

.detail-nav::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 0;
  left: 18px;
  height: 1px;
  background: #41605555;
}

.detail-landing {
  flex: 1;
  min-height: 0;
  padding: 10px 18px 14px;
  display: flex;
  flex-direction: column;
  color: #fff;
}

.landing-feature {
  position: relative;
  min-height: 428px;
  width: 100%;
  padding: 21px 3px 0;
  overflow: hidden;
  color: #fff;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  appearance: none;
}

.landing-feature::before {
  content: "";
  position: absolute;
  top: 62px;
  right: -92px;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  background: radial-gradient(circle, #c9ff3d 0 6%, #427b5b 6.4% 28%, #0b392b 28.4% 55%, transparent 55.4%);
  opacity: .75;
  filter: saturate(.88);
}

.landing-feature::after {
  content: "";
  position: absolute;
  top: -15px;
  right: -130px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 22px, #d9ffd20b 23px 24px);
}

.landing-feature > span {
  position: relative;
  z-index: 2;
}

.landing-kicker {
  display: block;
  color: #a6bdb2;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1.7px;
}

.landing-title {
  display: block;
  max-width: 330px;
  margin-top: 16px;
  font-size: 35px;
  font-weight: 800;
  line-height: .98;
  letter-spacing: -1.5px;
}

.landing-title em {
  display: block;
  margin-top: 5px;
  color: var(--lime);
  font-style: normal;
}

.landing-copy {
  display: block;
  width: 56%;
  margin-top: 13px;
  color: #a8beb3;
  font-size: 10px;
  line-height: 1.45;
}

.landing-art {
  position: absolute!important;
  z-index: 2;
  top: 172px;
  right: 2px;
  width: 186px;
  height: 158px;
  transform: translate3d(var(--mid-shift-x, 0), var(--mid-shift-y, 0), 0);
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}

.orbit {
  position: absolute;
  border: 1px solid #caff3d6b;
  border-radius: 50%;
}

.orbit-one { inset: 4px; }
.orbit-two { inset: 25px; }
.orbit-three { inset: 48px; }

.landing-credential {
  position: absolute;
  top: 44px;
  right: 3px;
  width: 146px;
  height: 86px;
  padding: 11px;
  border: 1px solid #caff3d66;
  border-radius: 13px;
  background: linear-gradient(145deg, #16372ddd, #07150ff5);
  box-shadow: 0 17px 38px #00110dbf;
  transform: rotate(calc(-6deg + var(--mid-tilt, 0deg)));
  transition: transform .7s cubic-bezier(.22,1,.36,1), box-shadow .7s ease;
}

.landing-credential::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-radial-gradient(ellipse at 86% 42%, transparent 0 9px, #d7ffca14 10px 11px);
}

.landing-credential > * {
  position: relative;
  z-index: 1;
}

.landing-credential small {
  display: block;
  color: #a9bdb4;
  font-size: 5px;
  letter-spacing: 1px;
}

.landing-credential b {
  display: block;
  margin-top: 9px;
  color: var(--lime);
  font-size: 22px;
}

.landing-credential i,
.landing-credential em {
  display: block;
  color: #e1e9e5;
  font-size: 6px;
  font-style: normal;
}

.landing-credential em {
  position: absolute;
  right: 0;
  bottom: -15px;
  color: #84998e;
  letter-spacing: .8px;
}

.landing-story-cta {
  position: absolute!important;
  right: 0;
  bottom: 12px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-top: 1px solid #49695d70;
  border-bottom: 1px solid #49695d70;
}

.landing-story-cta > span {
  display: flex;
  flex-direction: column;
}

.landing-story-cta small {
  color: var(--lime);
  font-size: 6px;
  letter-spacing: 1.3px;
}

.landing-story-cta b {
  margin-top: 5px;
  font-size: 11px;
}

.landing-story-cta > i {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--lime);
  color: #082018;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px #c9ff3d29;
  font-size: 17px;
  font-style: normal;
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
}

.landing-feature:active .landing-story-cta > i {
  transform: scale(.9);
  transition-duration: .12s;
}

.landing-feature:active .landing-credential {
  transform: rotate(-4deg) scale(.985);
  box-shadow: 0 10px 24px #00110da6;
  transition-duration: .12s;
}

.landing-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 5px 0 13px;
}

.landing-points article {
  min-width: 0;
  padding: 4px 10px;
  display: grid;
  grid-template-columns: 18px 1fr;
}

.landing-points article:first-child { padding-left: 2px; }
.landing-points article + article { border-left: 1px solid #3e5f5366; }

.landing-points i {
  color: var(--lime);
  font-size: 7px;
  font-style: normal;
}

.landing-points span {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.landing-points b {
  font-size: 8px;
}

.landing-points small {
  margin-top: 4px;
  color: #819b90;
  font-size: 6px;
  line-height: 1.35;
}

.landing-apply {
  min-height: 58px;
  margin-top: auto;
  padding: 8px 8px 8px 13px;
  border: 1px solid #51706466;
  border-radius: 17px;
  background: #0b3126b8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(16px);
}

.landing-apply > span {
  display: flex;
  flex-direction: column;
}

.landing-apply small {
  color: #8ca399;
  font-size: 6px;
  letter-spacing: 1px;
}

.landing-apply b {
  margin-top: 4px;
  font-size: 11px;
}

.landing-apply s {
  margin-right: 4px;
  color: #71877d;
  font-size: 8px;
  font-weight: 500;
}

.landing-apply button {
  min-width: 88px;
  height: 40px;
  border-radius: 13px;
  background: var(--lime);
  color: #071b12;
  font-size: 11px;
  font-weight: 800;
  transition: transform .35s cubic-bezier(.22,1,.36,1), filter .2s;
}

.landing-apply button:active {
  transform: scale(.94);
  filter: brightness(.92);
  transition-duration: .1s;
}

/* Shared-element-style story presentation. */
.story-overlay {
  --story-x: 18px;
  --story-y: 88px;
  --story-scale-x: .904;
  --story-scale-y: .54;
  display: flex;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 28px;
  transform: translate(var(--story-x), var(--story-y)) scale(var(--story-scale-x), var(--story-scale-y));
  transform-origin: top left;
  transition:
    transform .62s cubic-bezier(.22,1,.36,1),
    border-radius .62s cubic-bezier(.22,1,.36,1),
    opacity .18s ease,
    visibility 0s linear .65s;
}

.story-overlay.preparing {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.story-overlay.preparing.open {
  pointer-events: auto;
  border-radius: 0;
  transform: translate(0,0) scale(1);
}

.story-overlay .story-head,
.story-overlay .slides,
.story-overlay .story-footer {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .55s cubic-bezier(.22,1,.36,1);
}

.story-overlay.open .story-head,
.story-overlay.open .slides,
.story-overlay.open .story-footer {
  opacity: 1;
  transform: none;
  transition-delay: .18s;
}

.story-head {
  height: 54px;
  padding: 0 18px;
}

.story-head button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff12;
  display: grid;
  place-items: center;
  font-size: 20px;
  backdrop-filter: blur(12px);
  transition: transform .3s cubic-bezier(.22,1,.36,1), background .2s;
}

.story-head button:active { transform: scale(.88); background: #ffffff22; }

.slides {
  display: flex;
  width: 100%;
  min-width: 0;
  overflow: visible;
  transition: transform .65s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}

.slide,
.slide.active {
  width: 100%;
  min-width: 100%;
  height: 100%;
  padding: 8px 20px 12px;
  display: flex;
  flex-direction: column;
  opacity: 1;
}

.slide-art {
  height: 354px;
  flex: none;
  margin-bottom: 22px;
  border-radius: 28px;
  transform: scale(.94);
  filter: saturate(.82);
  transition: transform .72s cubic-bezier(.22,1,.36,1), filter .6s ease;
}

.slide.active .slide-art {
  transform: scale(1);
  filter: saturate(1);
}

.slide-body {
  opacity: .28;
  transform: translateY(16px);
  transition: opacity .45s ease .08s, transform .65s cubic-bezier(.22,1,.36,1) .04s;
}

.slide.active .slide-body {
  opacity: 1;
  transform: none;
}

.slide-body > small {
  color: #9bb0a7;
  font-size: 8px;
  letter-spacing: 1.5px;
}

.slide-body h2 {
  margin: 9px 0;
  font-size: 29px;
  line-height: 1.03;
}

.slide-body h2 em { color: var(--lime); font-style: normal; }

.slide-body p {
  margin: 0;
  color: #a7bbb2;
  font-size: 10px;
  line-height: 1.5;
}

.story-footer {
  height: 72px;
  padding: 8px 18px 16px;
}

.story-next {
  min-width: 92px;
  transition: transform .4s cubic-bezier(.22,1,.36,1), filter .2s;
}

.story-next:active {
  transform: scale(.92);
  filter: brightness(.9);
  transition-duration: .1s;
}

.story-next span { margin-left: 5px; }

.dots button {
  transition: width .5s cubic-bezier(.22,1,.36,1), background .35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .story-overlay,
  .story-overlay *,
  .landing-feature *,
  .landing-apply button {
    animation: none!important;
    transition-duration: .01ms!important;
  }
}

@keyframes midReveal {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes midArtReveal {
  from { opacity: 0; transform: translate3d(15px, 8px, 0) scale(.97); }
  to { opacity: 1; transform: translate3d(var(--mid-shift-x, 0), var(--mid-shift-y, 0), 0) scale(1); }
}

#mid-detail.active .landing-kicker,
#mid-detail.active .landing-title,
#mid-detail.active .landing-copy,
#mid-detail.active .landing-story-cta,
#mid-detail.active .landing-points,
#mid-detail.active .landing-apply {
  animation: midReveal .62s cubic-bezier(.22,1,.36,1) both;
}

#mid-detail.active .landing-title { animation-delay: .04s; }
#mid-detail.active .landing-copy { animation-delay: .09s; }
#mid-detail.active .landing-story-cta { animation-delay: .14s; }
#mid-detail.active .landing-points { animation-delay: .18s; }
#mid-detail.active .landing-apply { animation-delay: .22s; }
#mid-detail.active .landing-art { animation: midArtReveal .8s cubic-bezier(.22,1,.36,1) .08s both; }

/* V6 — App Store editorial composition: one hero, one summary, one product row. */
#mid-detail {
  background: #f1f2ed;
}

.phone:has(#mid-detail.active) > .statusbar {
  color: #101712;
}

.detail-nav {
  color: #101712;
  background: #f1f2eddb;
  backdrop-filter: blur(20px) saturate(1.3);
}

.detail-nav button,
.detail-nav h1 {
  color: #101712;
}

.detail-nav::after {
  background: #cfd4cd;
}

.detail-landing {
  padding: 12px 14px 13px;
  gap: 10px;
  color: #101712;
}

.landing-feature {
  min-height: 0;
  flex: 1 1 auto;
  padding: 22px 22px 0;
  border: 0;
  border-radius: 28px;
  background:
    radial-gradient(circle at 74% 58%, #417a5c 0 20%, transparent 20.5%),
    linear-gradient(145deg, #123e30 0%, #05251b 55%, #00170f 100%);
  box-shadow: 0 14px 36px #10271e24;
}

.landing-feature::before {
  top: 104px;
  right: -54px;
  width: 286px;
  height: 286px;
  background: radial-gradient(circle, #c9ff3d 0 6%, #397358 6.4% 28%, #0b392b 28.4% 55%, transparent 55.4%);
  opacity: .74;
}

.landing-feature::after {
  top: 58px;
  right: -112px;
  width: 390px;
  height: 390px;
}

.landing-kicker {
  color: #b8cbc1;
  font-size: 7px;
  letter-spacing: 1.6px;
}

.landing-title {
  max-width: 285px;
  margin-top: 14px;
  color: #fff;
  font-size: 28px;
  line-height: 1.01;
  letter-spacing: -.9px;
}

.landing-title em {
  margin-top: 3px;
}

.landing-copy {
  width: 64%;
  max-width: 215px;
  margin-top: 10px;
  color: #b2c5bb;
  font-size: 10px;
}

.landing-art {
  top: 166px;
  right: 10px;
  width: 218px;
  height: 186px;
}

.landing-credential {
  top: 49px;
  right: 0;
  width: 166px;
  height: 98px;
  padding: 13px;
  border-radius: 15px;
}

.landing-credential b {
  margin-top: 11px;
  font-size: 25px;
}

.landing-story-cta {
  right: 22px;
  bottom: 0;
  left: 22px;
  min-height: 70px;
  padding: 14px 0;
  border-bottom: 0;
}

.landing-story-cta small {
  font-size: 6px;
}

.landing-story-cta b {
  font-size: 11px;
}

.landing-story-cta > i {
  width: 38px;
  height: 38px;
}

.landing-points {
  height: 52px;
  flex: 0 0 52px;
  padding: 0 3px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 5px 18px #2031290a;
}

.landing-points article {
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.landing-points article:first-child {
  padding-left: 8px;
}

.landing-points article + article {
  border-left-color: #e0e3dd;
}

.landing-points i {
  display: none;
}

.landing-points span {
  align-items: center;
}

.landing-points b {
  color: #1b241e;
  font-size: 9px;
}

.landing-points small {
  display: none;
}

.landing-apply {
  min-height: 68px;
  flex: 0 0 68px;
  margin: 0;
  padding: 8px 9px 8px 10px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 7px 22px #2031290d;
  backdrop-filter: none;
  display: grid;
  grid-template-columns: 42px 1fr 78px;
  gap: 9px;
}

.apply-logo {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(145deg, #a4b759, #596d27);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 21px;
  font-style: normal;
  font-weight: 900;
}

.landing-apply > span {
  min-width: 0;
}

.landing-apply small {
  color: #7d877f;
  font-size: 6px;
}

.landing-apply b {
  color: #142019;
  font-size: 11px;
}

.landing-apply b em {
  display: block;
  margin-top: 3px;
  color: #6b756d;
  font-size: 8px;
  font-style: normal;
  font-weight: 600;
}

.landing-apply s {
  color: #a0a7a1;
  font-size: 7px;
}

.landing-apply button {
  min-width: 0;
  width: 78px;
  height: 38px;
  border-radius: 19px;
  background: #e8f7cc;
  color: #5e8617;
  font-size: 10px;
}

@media (max-height: 700px) {
  .detail-landing { gap: 7px; }
  .landing-feature { border-radius: 24px; }
  .landing-art { top: 145px; transform: scale(.9); transform-origin: right top; }
  .landing-points { height: 46px; flex-basis: 46px; }
  .landing-apply { min-height: 60px; flex-basis: 60px; }
}

/* V7 — dark MID overview with explicit value and price communication. */
#mid-detail {
  background:
    radial-gradient(circle at 88% 8%, #174b3838, transparent 30%),
    #001d15;
}

.phone:has(#mid-detail.active) > .statusbar {
  color: #fff;
}

.detail-nav {
  color: #fff;
  background: #001d15e8;
  backdrop-filter: blur(18px) saturate(1.15);
  display: flex;
  align-items: center;
}

.detail-nav > h1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  white-space: nowrap;
}

.detail-nav > button {
  width: 48px;
  flex: 0 0 48px;
}

.detail-nav button,
.detail-nav h1 {
  color: #fff;
}

.detail-nav::after {
  background: #31524666;
}

.mid-overview {
  flex: 1;
  min-height: 0;
  padding: 12px 14px 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-start;
  color: #fff;
  scrollbar-width: none;
}

.mid-overview::-webkit-scrollbar {
  display: none;
}

.mid-intro {
  min-height: 0;
  padding: 13px 14px 14px;
  border: 1px solid #3152478c;
  border-radius: 20px;
  background: linear-gradient(150deg, #0d3429b8, #06271e99);
}

.mid-intro-brand {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
}

.mid-intro-brand .mid-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 20px;
}

.mid-intro-brand > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  padding-left: 9px;
}

.mid-intro-brand b {
  font-size: 12px;
}

.mid-intro-brand small {
  margin-top: 3px;
  color: #8ea69b;
  font-size: 7px;
}

.mid-intro-brand em {
  padding: 4px 6px;
  border: 1px solid #6d8b7e;
  border-radius: 8px;
  color: #a9beb4;
  font-size: 6px;
  font-style: normal;
  letter-spacing: .8px;
}

.mid-intro h2 {
  margin: 14px 0 7px;
  font-size: 25px;
  line-height: 1.03;
  letter-spacing: -.8px;
}

.mid-intro > p {
  max-width: 308px;
  margin: 0;
  color: #a7bbb2;
  font-size: 9px;
  line-height: 1.45;
}

.mid-key-points {
  margin-top: 12px;
  border-top: 1px solid #3f5f536b;
}

.mid-key-points > span {
  min-height: 33px;
  display: grid;
  grid-template-columns: 20px 78px 1fr;
  align-items: center;
}

.mid-key-points > span + span {
  border-top: 1px solid #31514657;
}

.mid-key-points i {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #c9ff3d1c;
  color: var(--lime);
  display: grid;
  place-items: center;
  font-size: 7px;
  font-style: normal;
}

.mid-key-points b {
  font-size: 9px;
}

.mid-key-points small {
  color: #82998e;
  font-size: 7px;
}

.story-teaser {
  position: relative;
  width: 100%;
  min-height: 92px;
  padding: 11px 44px 11px 12px;
  overflow: hidden;
  border: 1px solid #3a5d508c;
  border-radius: 19px;
  background:
    radial-gradient(circle at 22% 50%, #376f52 0 16%, transparent 16.5%),
    linear-gradient(130deg, #103c2e, #06271e 64%);
  color: #fff;
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  text-align: left;
  transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .45s ease;
}

.story-teaser::after {
  content: "";
  position: absolute;
  inset: -60px auto -60px -25px;
  width: 160px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 12px, #d9ffc915 13px 14px);
}

.story-teaser:active {
  transform: scale(.985);
  border-color: #7ca45a;
  transition-duration: .12s;
}

.teaser-art {
  position: relative;
  z-index: 2;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid #c9ff3d70;
  display: grid;
  place-items: center;
}

.teaser-art::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid #c9ff3d55;
  border-radius: 50%;
}

.teaser-art > i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  top: 6px;
  right: 13px;
}

.teaser-art > b {
  position: relative;
  z-index: 2;
  font-size: 27px;
}

.teaser-art > em {
  position: absolute;
  z-index: 2;
  bottom: 8px;
  color: var(--lime);
  font-size: 5px;
  font-style: normal;
  letter-spacing: 1px;
}

.teaser-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.teaser-copy small {
  color: var(--lime);
  font-size: 6px;
  letter-spacing: 1px;
}

.teaser-copy b {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.25;
}

.teaser-copy em {
  margin-top: 6px;
  color: #8fa79c;
  font-size: 7px;
  font-style: normal;
}

.teaser-arrow {
  position: absolute;
  z-index: 3;
  right: 11px;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: var(--lime);
  color: #092017;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-style: normal;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}

.mid-price {
  min-height: 0;
  padding: 13px 14px 14px;
  border-radius: 20px;
  background: var(--paper);
  color: #111914;
  display: flex;
  flex-direction: column;
}

.mid-price > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mid-price > header > span {
  display: flex;
  flex-direction: column;
}

.mid-price header small {
  color: #788a2f;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 1.1px;
}

.mid-price header b {
  margin-top: 3px;
  font-size: 11px;
}

.mid-price header em {
  padding: 5px 7px;
  border-radius: 10px;
  background: #e9f6dc;
  color: #638b1c;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

.price-change {
  height: 52px;
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.price-change s {
  color: #929a93;
  font-size: 22px;
  font-weight: 700;
  text-decoration-thickness: 2px;
}

.price-change > i {
  color: #6f796f;
  font-size: 17px;
  font-style: normal;
}

.price-change strong {
  color: #5d8d12;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -1.8px;
}

.price-change span {
  color: #788179;
  font-size: 8px;
}

.mid-price > p {
  margin: 0 0 10px;
  color: #7b847d;
  font-size: 7px;
}

.mid-price > p i {
  margin-right: 5px;
  color: #70a023;
  font-style: normal;
}

.mid-price .primary {
  margin-top: 0;
  height: 42px;
  border-radius: 12px;
  font-size: 11px;
}

.mid-price .primary b {
  margin-left: 5px;
  font-size: 14px;
}

.mid-intro .story-teaser {
  min-height: 88px;
  margin-top: 10px;
  padding: 11px 40px 0 0;
  border: 0;
  border-top: 1px solid #3f5f536b;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  grid-template-columns: 76px 1fr;
}

.mid-intro .story-teaser::after {
  inset: -38px auto -48px -45px;
  width: 145px;
  opacity: .7;
}

.mid-intro .teaser-art {
  width: 62px;
  height: 62px;
}

.mid-intro .teaser-art > b {
  font-size: 22px;
}

.mid-intro .teaser-copy b {
  font-size: 10px;
  line-height: 1.3;
}

.mid-intro .teaser-arrow {
  right: 0;
  width: 28px;
  height: 28px;
}

@media (max-height: 700px) {
  .mid-overview { padding-top: 8px; gap: 7px; }
  .mid-intro { padding: 10px 12px; }
  .mid-intro h2 { margin-top: 9px; font-size: 22px; }
  .mid-key-points { margin-top: 8px; }
  .mid-key-points > span { min-height: 29px; }
  .story-teaser { min-height: 94px; }
  .teaser-art { width: 66px; height: 66px; }
  .mid-price { padding: 10px 12px 11px; }
  .price-change { height: 45px; }
  .price-change strong { font-size: 34px; }
}

/* V9 — single-panel MID editorial experience. */
.mid-overview {
  padding: 12px 14px 14px;
  overflow: hidden;
  display: block;
}

.mid-editorial-panel {
  height: 100%;
  padding: 15px;
  overflow: hidden;
  border: 1px solid #36584c8c;
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 5%, #285c452e, transparent 26%),
    linear-gradient(155deg, #0a3025 0%, #05251c 56%, #031c15 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 11px;
  box-shadow: 0 18px 42px #00110b66;
}

.editorial-brand {
  min-height: 38px;
  flex: 0 0 38px;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
}

.editorial-brand .mid-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 20px;
}

.editorial-brand > span:nth-child(2) {
  padding-left: 9px;
  display: flex;
  flex-direction: column;
}

.editorial-brand b {
  font-size: 11px;
}

.editorial-brand small {
  margin-top: 3px;
  color: #8ea79b;
  font-size: 6px;
}

.editorial-brand em {
  padding: 4px 6px;
  border: 1px solid #6d8b7e;
  border-radius: 8px;
  color: #a9beb4;
  font-size: 6px;
  font-style: normal;
  letter-spacing: .8px;
}

.editorial-intro {
  flex: 0 0 auto;
}

.editorial-intro > small {
  color: var(--lime);
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.editorial-intro h2 {
  margin: 6px 0 6px;
  font-size: 24px;
  line-height: 1.02;
  letter-spacing: -.65px;
}

.editorial-intro p {
  max-width: 292px;
  margin: 0;
  color: #a9bdb3;
  font-size: 8px;
  line-height: 1.45;
}

.editorial-points {
  flex: 0 0 auto;
  border-top: 1px solid #3d5e526b;
  border-bottom: 1px solid #3d5e526b;
}

.editorial-points > span {
  min-height: 28px;
  display: grid;
  grid-template-columns: 19px 90px 1fr;
  align-items: center;
}

.editorial-points > span + span {
  border-top: 1px solid #3151464f;
}

.editorial-points i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #c9ff3d1c;
  color: var(--lime);
  display: grid;
  place-items: center;
  font-size: 7px;
  font-style: normal;
}

.editorial-points b {
  font-size: 8px;
}

.editorial-points small {
  color: #80978c;
  font-size: 7px;
}

.editorial-story {
  position: relative;
  width: 100%;
  min-height: 220px;
  flex: 0 0 220px;
  overflow: hidden;
  border: 1px solid #7d926f52;
  border-radius: 17px;
  background:
    linear-gradient(90deg, #031c15f2 0%, #031c1580 45%, #031c1512 100%),
    linear-gradient(0deg, #031c15e8 0%, transparent 62%),
    url('mid-editorial-v1.png') center 60% / cover no-repeat;
  color: #fff;
  text-align: left;
  transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .3s, filter .3s;
}

.editorial-story::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 45%, #c9ff3d0c);
  pointer-events: none;
}

.editorial-story:active {
  transform: scale(.987);
  filter: brightness(.94);
  transition-duration: .12s;
}

.editorial-story > span {
  position: absolute;
  z-index: 2;
  left: 13px;
  bottom: 13px;
  display: flex;
  flex-direction: column;
}

.editorial-story small {
  color: var(--lime);
  font-size: 6px;
  letter-spacing: 1px;
}

.editorial-story b {
  margin-top: 5px;
  font-size: 11px;
}

.editorial-story > i {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: var(--lime);
  color: #092017;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-style: normal;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}

.editorial-offer {
  min-height: 150px;
  flex: 1 1 auto;
  padding-top: 10px;
  border-top: 1px solid #4b6b5e75;
  display: grid;
  grid-template-columns: 1fr 90px;
  gap: 10px;
  align-items: center;
}

.editorial-offer > div {
  min-width: 0;
}

.editorial-offer > div > small {
  color: #9eb483;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 1px;
}

.editorial-price {
  margin-top: 4px;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.editorial-price s {
  color: #87998f;
  font-size: 21px;
  font-weight: 700;
  text-decoration-thickness: 2px;
}

.editorial-price > i {
  color: #9aae9f;
  font-size: 12px;
  font-style: normal;
}

.editorial-price strong {
  color: var(--lime);
  font-size: 42px;
  line-height: 1;
  letter-spacing: -1.3px;
}

.editorial-price em {
  color: #8fa59a;
  font-size: 7px;
  font-style: normal;
}

.editorial-offer p {
  margin: 4px 0 0;
  color: #869d92;
  font-size: 6px;
}

.editorial-offer > button {
  width: 90px;
  height: 44px;
  border-radius: 13px;
  background: var(--lime);
  color: #071b12;
  font-size: 11px;
  font-weight: 800;
  transition: transform .35s cubic-bezier(.22,1,.36,1), filter .2s;
}

.editorial-offer > button:active {
  transform: scale(.94);
  filter: brightness(.92);
  transition-duration: .1s;
}

.editorial-offer > button b {
  margin-left: 4px;
}

@media (max-height: 700px) {
  .mid-editorial-panel { padding: 12px; gap: 7px; }
  .editorial-intro h2 { font-size: 21px; }
  .editorial-points > span { min-height: 25px; }
  .editorial-story { min-height: 115px; }
  .editorial-offer { min-height: 102px; flex-basis: 102px; }
}

/* V10 — fuller content, compact story, integrated offer and floating apply bar. */
.mid-overview {
  position: relative;
}

.mid-editorial-panel {
  padding-bottom: 15px;
}

.editorial-intro h2 {
  font-size: 25px;
}

.editorial-intro p {
  max-width: 304px;
  font-size: 8px;
}

.editorial-points > span {
  min-height: 31px;
  grid-template-columns: 19px 88px 1fr;
}

.editorial-points small {
  font-size: 6.5px;
}

.editorial-story {
  min-height: 165px;
  flex: 0 0 165px;
  background-position: center 57%;
}

.editorial-offer {
  min-height: 190px;
  flex: 1 1 auto;
  padding: 11px 0 69px;
  display: block;
}

.editorial-offer > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.editorial-offer > header > span {
  display: flex;
  flex-direction: column;
}

.editorial-offer > header small {
  color: #a8bd89;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 1px;
}

.editorial-offer > header b {
  margin-top: 3px;
  font-size: 9px;
}

.editorial-offer > header > em {
  padding: 5px 7px;
  border-radius: 10px;
  background: #c9ff3d1a;
  color: var(--lime);
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

.editorial-offer > .editorial-price {
  margin-top: 7px;
}

.editorial-price s {
  font-size: 23px;
}

.editorial-price strong {
  font-size: 43px;
}

.editorial-coupon {
  margin-top: 7px;
  padding: 7px 9px;
  border: 1px solid #526f625e;
  border-radius: 10px;
  background: #ffffff08;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.editorial-coupon > span {
  display: flex;
  align-items: center;
}

.editorial-coupon i {
  width: 15px;
  height: 15px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--lime);
  color: #092017;
  display: grid;
  place-items: center;
  font-size: 7px;
  font-style: normal;
}

.editorial-coupon b,
.editorial-coupon > strong {
  font-size: 8px;
}

.editorial-coupon > strong {
  color: var(--lime);
}

.detail-floating-apply {
  position: absolute;
  z-index: 12;
  right: 29px;
  bottom: 25px;
  left: 29px;
  height: 58px;
  padding: 7px 8px 7px 12px;
  border: 1px solid #72908370;
  border-radius: 17px;
  background: #123c2ff0;
  box-shadow: 0 14px 32px #00110da6;
  backdrop-filter: blur(18px) saturate(1.2);
  display: grid;
  grid-template-columns: 1fr 143px;
  gap: 9px;
  align-items: center;
  color: #fff;
}

.detail-floating-apply > span {
  display: flex;
  flex-direction: column;
}

.detail-floating-apply small {
  color: #92a99e;
  font-size: 6px;
  letter-spacing: 1px;
}

.detail-floating-apply > span > b {
  margin-top: 2px;
  color: var(--lime);
  font-size: 18px;
}

.detail-floating-apply > span em {
  margin-left: 3px;
  color: #9eb2a8;
  font-size: 6px;
  font-style: normal;
  font-weight: 500;
}

.detail-floating-apply > button {
  width: 143px;
  height: 42px;
  border-radius: 12px;
  background: var(--lime);
  color: #071b12;
  font-size: 10px;
  font-weight: 800;
  transition: transform .35s cubic-bezier(.22,1,.36,1), filter .2s;
}

.detail-floating-apply > button:active {
  transform: scale(.95);
  filter: brightness(.92);
  transition-duration: .1s;
}

.detail-floating-apply > button b {
  margin-left: 4px;
  font-size: 13px;
}

@media (max-height: 700px) {
  .editorial-intro h2 { font-size: 21px; }
  .editorial-points > span { min-height: 25px; }
  .editorial-story { min-height: 125px; flex-basis: 125px; }
  .editorial-offer { min-height: 165px; padding-bottom: 64px; }
  .detail-floating-apply { height: 54px; bottom: 21px; }
}

/* V11 — readable overview plus one consolidated floating offer action. */
.mid-editorial-panel {
  height: calc(100% - 80px);
  padding: 15px;
  padding-bottom: 15px;
}

.editorial-brand b {
  font-size: 13px;
}

.editorial-brand small {
  font-size: 7.5px;
}

.editorial-brand em {
  font-size: 7px;
}

.editorial-intro > small {
  font-size: 7px;
}

.editorial-intro h2 {
  font-size: 27px;
  line-height: 1.04;
}

.editorial-intro p {
  max-width: 310px;
  font-size: 9.5px;
  line-height: 1.5;
}

.editorial-points > span {
  min-height: 35px;
  grid-template-columns: 21px 95px 1fr;
}

.editorial-points i {
  width: 16px;
  height: 16px;
  font-size: 8px;
}

.editorial-points b {
  font-size: 9.5px;
}

.editorial-points small {
  font-size: 8px;
}

.editorial-story {
  min-height: 160px;
  flex: 1 1 auto;
}

.editorial-story small {
  font-size: 7px;
}

.editorial-story b {
  font-size: 12px;
}

.detail-floating-apply {
  right: 20px;
  bottom: 14px;
  left: 20px;
  height: 68px;
  padding: 7px 8px 7px 13px;
  border-color: #84a0948c;
  border-radius: 19px;
  background: #123c2ff7;
  grid-template-columns: 1fr 148px;
}

.detail-floating-apply small {
  font-size: 6.5px;
}

.detail-floating-apply > span > b {
  margin-top: 2px;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 12px;
}

.detail-floating-apply > span > b s {
  color: #8fa096;
  font-size: 13px;
  text-decoration-thickness: 1.5px;
}

.detail-floating-apply > span > b i {
  color: #a5b7ae;
  font-size: 10px;
  font-style: normal;
}

.detail-floating-apply > span > b strong {
  color: var(--lime);
  font-size: 24px;
  line-height: 1;
}

.detail-floating-apply > span > em {
  display: block;
  margin: 2px 0 0;
  color: #9eb2a8;
  font-size: 6.5px;
  font-style: normal;
}

.detail-floating-apply > button {
  width: 148px;
  height: 52px;
  border-radius: 14px;
  font-size: 10.5px;
}

@media (max-height: 700px) {
  .mid-editorial-panel { height: calc(100% - 70px); padding: 12px; }
  .editorial-intro h2 { font-size: 23px; }
  .editorial-intro p { font-size: 8.5px; }
  .editorial-points > span { min-height: 29px; }
  .editorial-points small { font-size: 7px; }
  .detail-floating-apply { height: 60px; bottom: 12px; }
  .detail-floating-apply > button { height: 46px; }
}

/* V12 — visual polish without changing the approved architecture. */
.mid-editorial-panel {
  border-color: #45695c99;
  background:
    radial-gradient(circle at 88% 4%, #3b74543b, transparent 28%),
    linear-gradient(155deg, #0d3529 0%, #06271e 56%, #031c15 100%);
  box-shadow: 0 20px 48px #00110b80, inset 0 1px 0 #ffffff08;
}

.editorial-brand .mid-logo {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(145deg, #a8ba56, #536724);
  box-shadow: inset 0 1px 0 #ffffff3d, 0 7px 16px #00120c4d;
}

.editorial-brand > span:nth-child(2) {
  padding-left: 10px;
}

.editorial-brand small {
  color: #9eb0a7;
  font-size: 8px;
}

.editorial-brand em {
  padding: 5px 8px;
  border-color: #89a397;
  color: #c0d0c8;
  letter-spacing: 1px;
}

.editorial-intro > small {
  color: #c9ff3d;
  letter-spacing: 1.35px;
}

.editorial-intro h2 {
  margin-top: 7px;
  margin-bottom: 7px;
  font-size: 28px;
  letter-spacing: -.8px;
}

.editorial-intro p {
  max-width: 300px;
  color: #b5c6be;
  font-size: 10.5px;
  line-height: 1.48;
}

.editorial-points {
  border-top-color: #52716678;
  border-bottom-color: #52716678;
}

.editorial-points > span {
  min-height: 37px;
  grid-template-columns: 23px 101px 1fr;
}

.editorial-points > span + span {
  border-top-color: #42625757;
}

.editorial-points i {
  width: 17px;
  height: 17px;
  background: #c9ff3d24;
}

.editorial-points b {
  font-size: 10px;
}

.editorial-points small {
  color: #93a79d;
  font-size: 8.5px;
}

.editorial-story {
  border-color: #849b735c;
  background:
    linear-gradient(90deg, #031c1582 0%, #031c1533 45%, transparent 100%),
    linear-gradient(0deg, #021a13ed 0%, #021a1380 25%, transparent 60%),
    url('mid-editorial-v1.png') calc(50% + var(--mid-shift-x, 0px)) calc(57% + var(--mid-shift-y, 0px)) / cover no-repeat;
  box-shadow: inset 0 -55px 70px #00140da6, 0 10px 26px #00140d42;
  transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .3s, filter .3s, background-position .7s cubic-bezier(.22,1,.36,1);
}

.editorial-story > span {
  left: 14px;
  bottom: 14px;
}

.editorial-story small {
  letter-spacing: 1.15px;
}

.editorial-story b {
  margin-top: 6px;
  font-size: 12.5px;
}

.editorial-story > i {
  right: 13px;
  bottom: 13px;
  width: 34px;
  height: 34px;
  box-shadow: 0 7px 17px #c9ff3d3d;
}

.editorial-story > i > span {
  display: block;
  animation: midArrowLoop 1.25s cubic-bezier(.45,0,.55,1) infinite;
}

@keyframes midArrowLoop {
  0%, 100% { transform: translateX(-2px); }
  50% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-story > i > span {
    animation: none;
  }
}

/* V26 — original two-segment payment progress and dark bottom action area. */
.payment-progress {
  height: 16px;
  flex: 0 0 16px;
  padding: 6px 14px 7px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.payment-progress i {
  height: 2px;
  border-radius: 3px;
  background: #6d7f776e;
}

.payment-progress i.active {
  background: var(--lime);
  box-shadow: 0 0 6px #c9ff3d36;
}

.checkout-scroll {
  padding-top: 12px;
  padding-bottom: 118px;
}

.checkout-sticky {
  min-height: 112px;
  padding: 8px 14px max(12px, env(safe-area-inset-bottom));
  border-top: 0;
  background: linear-gradient(transparent, #002219 17%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.checkout-sticky .agreement {
  width: 100%;
  min-height: 28px;
  margin: 0;
  padding: 0 2px;
  align-items: center;
  color: #b8c7c0;
  font-size: 9px;
}

.checkout-sticky .agreement span {
  width: 18px;
  height: 18px;
  border-radius: 5px;
}

.checkout-sticky .primary {
  width: 100%;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 14px;
  font-size: 13px;
}

.checkout-sticky .primary:disabled {
  background: #31574b;
  color: #81978f;
}

/* V27 — passport MRZ capture and electronic passport NFC verification. */
.mrz-demo {
  display: none;
}

.scan-instruction > small {
  display: block;
  margin-top: 5px;
  color: #a8bbb2;
  font-size: 9px;
  letter-spacing: .6px;
}

.doc-demo.passport-demo {
  padding-bottom: 20px;
}

.doc-demo.passport-demo .mrz-demo {
  position: absolute;
  right: 16px;
  bottom: 12px;
  left: 16px;
  display: block;
  overflow: hidden;
  color: #1c2b24;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 7px;
  font-style: normal;
  line-height: 1.35;
  letter-spacing: .7px;
  white-space: nowrap;
}

.passport-nfc-screen {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, #154b375c, transparent 38%),
    #001d15;
}

.nfc-copy {
  padding: 30px 24px 14px;
  text-align: center;
}

.nfc-copy > span {
  color: var(--lime);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 1.3px;
}

.nfc-copy h2 {
  margin: 10px 0 6px;
  color: #fff;
  font-size: 28px;
  line-height: 1.15;
}

.nfc-copy p {
  margin: 0;
  color: #aebdb7;
  font-size: 13px;
  line-height: 1.55;
}

.nfc-visual {
  position: relative;
  height: 360px;
  margin: 12px 26px 18px;
}

.passport-book {
  position: absolute;
  top: 88px;
  left: 24px;
  width: 194px;
  height: 250px;
  border: 1px solid #b2ce806b;
  border-radius: 15px 22px 22px 15px;
  background: linear-gradient(145deg, #183a2e, #071b14 72%);
  box-shadow: 0 24px 42px #00100bb8, inset 0 1px #ffffff18;
  transform: rotate(-7deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #d9c987;
}

.passport-book > i {font-size: 44px;font-style: normal}
.passport-book > b {margin-top: 18px;font-size: 17px;letter-spacing: 2px}
.passport-book > small {margin-top: 4px;font-size: 9px;letter-spacing: 2px}

.nfc-phone {
  position: absolute;
  z-index: 2;
  top: 24px;
  right: 28px;
  width: 142px;
  height: 278px;
  border: 3px solid #d9e4dd;
  border-radius: 27px;
  background: linear-gradient(160deg, #49675b, #152b23 60%, #091a14);
  box-shadow: 0 24px 48px #000b078f, inset 0 0 0 4px #071b14;
  transform: rotate(8deg);
}

.nfc-phone > span {position:absolute;top:8px;left:50%;width:38px;height:5px;border-radius:8px;background:#0a1813;transform:translateX(-50%)}
.nfc-phone > i {position:absolute;inset:0;display:grid;place-items:center;color:#dff0e7;font-size:18px;font-style:normal;font-weight:800;letter-spacing:2px}

.nfc-waves {position:absolute;z-index:3;top:124px;left:194px;width:82px;height:82px}
.nfc-waves i {position:absolute;inset:50%;border:2px solid var(--lime);border-radius:50%;opacity:.55;transform:translate(-50%,-50%)}
.nfc-waves i:nth-child(1){width:24px;height:24px}.nfc-waves i:nth-child(2){width:48px;height:48px}.nfc-waves i:nth-child(3){width:74px;height:74px}
.nfc-visual.reading .nfc-waves i {animation:nfcPulse 1.4s ease-out infinite}
.nfc-visual.reading .nfc-waves i:nth-child(2){animation-delay:.18s}.nfc-visual.reading .nfc-waves i:nth-child(3){animation-delay:.36s}

.nfc-state {
  margin: 0 26px 14px;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid #51746666;
  border-radius: 17px;
  background: #12382c9c;
  display: flex;
  align-items: center;
  gap: 11px;
}
.nfc-state > i {width:32px;height:32px;border-radius:50%;background:#294e41;display:grid;place-items:center;color:var(--lime);font-size:18px;font-style:normal}
.nfc-state span {display:flex;flex-direction:column;gap:3px}.nfc-state b{color:#fff;font-size:13px}.nfc-state small{color:#9fb2aa;font-size:10px}
.nfc-state.success {border-color:#bfff5373}.nfc-state.success > i{background:var(--lime);color:#0b2519}
.nfc-state.contact-error {border-color:#d99e5180}.nfc-state.contact-error > i{background:#7b5328;color:#ffe0a9}
.nfc-state.read-error {border-color:#d668608c}.nfc-state.read-error > i{background:#703c38;color:#ffd1cc}
.nfc-state.seeking > i {animation:nfcStatePulse 1.1s ease-in-out infinite}

.nfc-test-controls {margin:0 26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.nfc-test-controls button {height:42px;padding:0 4px;border:1px dashed #b68a50;border-radius:12px;background:#0d3025;color:#f0d4a8;font-size:9px;font-weight:700;white-space:nowrap}
.nfc-test-controls button:nth-child(2) {border-color:#b8655e;color:#f3b9b3}
.nfc-test-controls button:last-child {border-color:#81a873;color:#d9f5d0}
.nfc-test-controls button:disabled {opacity:.42}

@keyframes nfcPulse {0%{transform:translate(-50%,-50%) scale(.68);opacity:.9}100%{transform:translate(-50%,-50%) scale(1.22);opacity:0}}
@keyframes nfcStatePulse {50%{transform:scale(.86);opacity:.58}}

@media (prefers-reduced-motion: reduce) {.nfc-visual.reading .nfc-waves i,.nfc-state.seeking > i{animation:none}}

/* V27 — purchase success state matched to the approved reference. */
#purchase-success {
  padding: 70px 22px 24px!important;
}

#purchase-success .success-mark {
  position: relative;
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  border: 0;
  border-radius: 50%;
  background: #172a22;
  color: transparent;
  box-shadow: none;
}

#purchase-success .success-mark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  border: 4px solid #75c77a;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

#purchase-success .success-mark::after {
  content: "";
  position: absolute;
  top: 45px;
  left: 39px;
  width: 17px;
  height: 9px;
  border-bottom: 4px solid #75c77a;
  border-left: 4px solid #75c77a;
  border-radius: 2px;
  transform: rotate(-45deg);
}

#purchase-success > h1 {
  margin: 22px 0 15px;
  font-size: 19px;
  font-weight: 780;
  line-height: 1.25;
  letter-spacing: 0;
}

#purchase-success > p {
  max-width: 315px;
  margin: 0;
  color: #afbeb7;
  font-size: 13px;
  line-height: 1.65;
}

#purchase-success .receipt {
  margin: 25px 0 auto;
}

/* V28 — prototype controls for normal and abnormal ID/passport scan results. */
.scan-bottom {
  gap: 5px!important;
}

.scan-test-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: min(315px, calc(100vw - 48px));
  margin-top: 9px;
}

.scan-test-controls button {
  width: auto!important;
  height: 34px!important;
  padding: 0 10px!important;
  border: 1px dashed #8aa298!important;
  border-radius: 9px!important;
  background: #102a21!important;
  color: #dbe6df!important;
  font-size: 10px!important;
  font-weight: 700;
}

.scan-test-controls button:last-child {
  border-color: #d49b75!important;
  color: #ffd7bd!important;
}

.identity-form input.scan-missing {
  border-color: #e55f56!important;
  background: #fff3ef!important;
  box-shadow: 0 0 0 1px #e55f5638;
}

.identity-form input.scan-missing::placeholder {
  color: #c64b43;
}

.scan-summary small.scan-result-partial,
.scan-summary small.scan-result-failed {
  color: #c85148!important;
}

.scan-summary small.scan-result-partial i,
.scan-summary small.scan-result-failed i {
  color: #c85148!important;
}

.side-transition {
  position: absolute;
  z-index: 80;
  inset: 28px 0 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background: rgba(2, 25, 18, .97);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.015);
  transition: opacity .2s ease, transform .2s ease;
}

.side-transition.show {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.turning-document {
  position: relative;
  width: 146px;
  height: 92px;
  margin-bottom: 34px;
  transform-style: preserve-3d;
}

.side-transition.show .turning-document {
  animation: turnDocument 1.1s cubic-bezier(.22,.72,.2,1) both;
}

.turning-document span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid #769b76;
  border-radius: 11px;
  background: linear-gradient(145deg, #dfe5d8, #aab9a7);
  color: #173226;
  font-size: 13px;
  font-weight: 800;
  backface-visibility: hidden;
  box-shadow: 0 18px 45px #0006;
}

.turning-document span:last-child {
  transform: rotateY(180deg);
}

.side-transition > i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 2px solid var(--lime);
  border-radius: 50%;
  color: var(--lime);
  font-size: 22px;
  font-style: normal;
  font-weight: 800;
}

.side-transition.warning > i {
  border-color: #ffbb8f;
  color: #ffbb8f;
}

.side-transition h2 {
  margin: 17px 0 7px;
  font-size: 24px;
  line-height: 1.2;
}

.side-transition p {
  margin: 0;
  color: #a9bbb3;
  font-size: 13px;
}

@keyframes turnDocument {
  0% { transform: perspective(700px) rotateY(0) scale(.96); }
  45% { transform: perspective(700px) rotateY(90deg) scale(1.04); }
  100% { transform: perspective(700px) rotateY(180deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .side-transition.show .turning-document { animation: none; transform: rotateY(180deg); }
}

/* V29 — portrait signature review with a dedicated landscape writing surface. */
.signature-review-scroll {
  padding: 18px 18px 104px!important;
}

.signature-review-scroll > h2 {
  margin-bottom: 6px!important;
}

.signature-review-scroll > p {
  margin-bottom: 17px!important;
}

.signature-review-block h3,
.mid-card-review h3 {
  margin: 0 0 7px;
  color: #aabbb3;
  font-size: 10px;
  font-weight: 500;
}

.signature-tap-area {
  position: relative;
  width: 100%;
  height: 98px;
  overflow: hidden;
  border: 1px solid #5e786e;
  border-radius: 15px;
  background: #f5f3ea;
  color: #15231c;
}

.signature-tap-area > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 3px;
  text-align: center;
}

.signature-tap-area > span i {
  color: #6e982a;
  font-size: 18px;
  font-style: normal;
}

.signature-tap-area > span b {
  font-size: 13px;
}

.signature-tap-area > span small {
  color: #89928c;
  font-size: 9px;
  font-weight: 500;
}

.signature-tap-area > img {
  display: none;
  width: 100%;
  height: 100%;
  padding: 13px 26px;
  object-fit: contain;
}

.signature-tap-area.signed > span {
  display: none;
}

.signature-tap-area.signed > img {
  display: block;
}

.mid-card-review {
  margin-top: 15px;
}

.mid-card-render {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid #526d63;
  border-radius: 15px;
  background: #e9e2d6;
  aspect-ratio: 622 / 390;
}

.mid-card-render > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-signature-slot {
  position: absolute;
  top: 31.3%;
  left: 65.6%;
  width: 20.2%;
  height: 10.3%;
  overflow: hidden;
  border: 1px solid #c4bcad;
  border-radius: 3px;
  background: #ded8cc;
}

.card-signature-slot img {
  width: 100%;
  height: 100%;
  padding: 2px 5px;
  object-fit: contain;
  filter: grayscale(1) contrast(.85);
}

.card-signature-slot img:not([src]) {
  display: none;
}

.signature-actions {
  display: grid!important;
  grid-template-columns: auto 1fr;
  gap: 9px;
}

.signature-actions .secondary {
  min-width: 104px;
  height: 48px;
  border: 1px solid var(--lime);
  border-radius: 14px;
  color: #fff;
  font-size: 12px;
  font-weight: 750;
}

.signature-actions .secondary[hidden] {
  display: none;
}

.signature-actions .secondary[hidden] + .primary {
  grid-column: 1 / -1;
}

.signature-editor {
  position: absolute;
  z-index: 100;
  inset: 0;
  display: none;
  padding: 24px 28px 22px;
  background: #06170f;
  color: #fff;
}

.signature-editor.open {
  display: grid;
  grid-template-rows: 64px 1fr;
  gap: 12px;
}

.phone.signature-landscape {
  width: min(100vw, 812px)!important;
  height: min(100vh, 375px)!important;
}

.signature-editor header {
  display: grid;
  grid-template-columns: 48px 1fr 92px 112px;
  gap: 9px;
  align-items: center;
}

.signature-editor header > button:first-child {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--lime);
  color: #102118;
  font-size: 30px;
  line-height: 1;
}

.signature-editor header span {
  display: flex;
  flex-direction: column;
}

.signature-editor header b {
  font-size: 16px;
}

.signature-editor header small {
  margin-top: 3px;
  color: var(--lime);
  font-size: 10px;
}

.signature-editor #clear-signature,
.signature-editor #save-signature {
  height: 40px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
}

.signature-editor #clear-signature {
  border: 1px solid #567064;
  color: #d5dfda;
}

.signature-editor #save-signature {
  background: var(--lime);
  color: #112018;
}

.signature-editor #save-signature:disabled {
  background: #355349;
  color: #799087;
}

.signature-editor canvas {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 10px;
  background-color: #f7f5ec;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='100'%3E%3Ctext x='180' y='62' text-anchor='middle' font-family='Arial' font-size='38' font-weight='700' fill='%23deddd6'%3ESign Here%3C/text%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 270px auto;
  touch-action: none;
}

.signature-editor.has-ink canvas {
  background-image: none;
}

@media (max-width: 560px) {
  .signature-editor {
    padding-inline: 16px;
  }
  .signature-editor header {
    grid-template-columns: 42px 1fr 68px 76px;
  }
  .signature-editor header small {
    display: none;
  }
}

/* V30 — in-place MID application progress card and external prototype controls. */
.mid-entry[hidden],
.citizenship-progress[hidden],
.home-issued-mid[hidden] {
  display: none!important;
}

.home-issued-mid {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 214px;
  padding: 17px 16px 15px;
  border-radius: 22px;
  background: var(--paper);
  color: var(--ink);
}

.home-issued-mid::before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -24px;
  width: 245px;
  height: 128px;
  opacity: .38;
  background: repeating-radial-gradient(ellipse at bottom right, transparent 0 8px,#d7ddd3 9px 10px);
}

.home-issued-mid::after {
  content: "M";
  position: absolute;
  top: 58px;
  right: 8px;
  color: #e5e8df8c;
  font-size: 120px;
  font-weight: 900;
}

.home-issued-mid > small {position:relative;z-index:1;font-size:8px;letter-spacing:.06em}
.home-issued-mid > header {position:relative;z-index:1;display:grid;grid-template-columns:38px 1fr 145px;align-items:center;margin-top:10px}
.home-issued-mid > header > div {display:flex;padding-left:8px;flex-direction:column}
.home-issued-mid > header b {font-size:14px}.home-issued-mid > header small{color:#68736c;font-size:9px}
.home-issued-mid > header em {font-size:8px;font-style:normal;line-height:1.3;text-align:right}
.home-issued-mid h2 {position:relative;z-index:1;margin:22px 0 6px;font-size:29px;line-height:1.05}
.home-issued-mid > p {position:relative;z-index:1;margin:0;color:#86b943;font-size:13px;font-weight:800}
.home-issued-mid > p i {font-style:normal}
.home-issued-mid footer {position:relative;z-index:1;display:flex;align-items:end;justify-content:space-between;margin-top:17px;font-size:10px}
.issued-qr {display:grid;width:32px;height:32px;place-items:center;border:1px solid #838b85;border-radius:8px;background:#fff;font-size:20px;font-style:normal}

.application-success {
  background:
    radial-gradient(circle at 50% 27%,#164433 0,transparent 30%),
    var(--green);
}

.application-success .success-mark {
  margin-top: 36px;
  border-color: #9cd358;
  box-shadow: 0 0 36px #b7ef6940;
}

.application-success > small {
  color: var(--lime);
}

.application-success > h1 {
  margin-top: 12px;
  font-size: 32px;
}

.application-success > p {
  max-width: 310px;
  font-size: 12px;
  line-height: 1.65;
}

.submission-summary {
  width: 100%;
  margin-top: 18px;
  padding: 7px 15px;
  border: 1px solid #315347;
  border-radius: 18px;
  background: #0d3025;
}

.submission-summary > div {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

.submission-summary > div + div {
  border-top: 1px solid #29493e;
}

.submission-summary span {color:#95a9a0}
.submission-summary strong {color:var(--lime)}
.application-success > .primary {margin-top:auto}

.citizenship-progress {
  width: 100%;
  min-height: 214px;
  padding: 16px 15px 14px;
  border-radius: 22px;
  background: var(--paper);
  color: var(--ink);
}

.citizenship-progress > header {
  display: flex;
  align-items: center;
  gap: 9px;
}

.citizenship-progress > header h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
}

.progress-logo {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid #93c84d;
  border-radius: 7px;
  color: #79aa33;
  font-size: 15px;
  font-weight: 900;
}

.application-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  margin: 17px 0 15px;
  padding: 0;
  list-style: none;
}

.application-steps::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 12.5%;
  left: 12.5%;
  height: 1px;
  background: #dfe4df;
}

.application-steps li {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 6px;
  color: #89918c;
  font-size: 9px;
}

.application-steps li i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: #edf0ed;
  color: #b8beb9;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.application-steps li.done i,
.application-steps li.current i {
  background: #95ca4d;
  color: #fff;
}

.application-steps li.done i {
  font-size: 0;
}

.application-steps li.done i::after {
  content: "✓";
  font-size: 13px;
}

.application-steps li.done,
.application-steps li.current {
  color: #18211c;
}

.progress-action {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding-top: 13px;
  border-top: 1px solid #e0e3dd;
}

.progress-action > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.progress-action b {
  font-size: 14px;
}

.progress-action small {
  margin-top: 5px;
  color: #59625d;
  font-size: 10px;
  line-height: 1.35;
}

.progress-action em,
.progress-action button {
  padding: 9px 11px;
  border-radius: 10px;
  background: #fff0b8;
  color: #d09b2d;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.progress-action button {
  background: var(--lime);
  color: #102017;
}

.progress-action button:not([hidden]) + * {
  display: none;
}

.citizenship-progress[data-stage="address"] .progress-action em {
  display: none;
}

.citizenship-progress[data-stage="complete"] .progress-action em {
  background: #e8f4d9;
  color: #61902c;
}

.prototype-controls {
  position: fixed;
  z-index: 500;
  top: 50%;
  left: calc(50% + 205px);
  display: flex;
  width: 154px;
  padding: 10px;
  border: 1px solid #37554a;
  border-radius: 14px;
  background: #0b2a21ee;
  box-shadow: 0 14px 45px #07130f44;
  flex-direction: column;
  gap: 7px;
  transform: translateY(-50%);
}

.prototype-controls b {
  color: #b7c8c0;
  font-size: 10px;
  letter-spacing: .08em;
}

.prototype-controls button {
  padding: 9px 8px;
  border: 1px solid #557166;
  border-radius: 9px;
  background: #173a2e;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-align: left;
}

.prototype-controls button.active {
  position: relative;
  border-color: #a8dd59;
  background: #244d3d;
  color: var(--lime);
  box-shadow: inset 0 0 0 1px #b7ed6540,0 5px 14px #00140d55;
}

.prototype-controls button.active::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  transform: translateY(-50%);
}

.prototype-controls #demo-shipped {
  border-color: #d49a44;
  color: #ffd277;
}

.prototype-controls #demo-shipped.active {
  background: #5b421d80;
  color: #ffd05e;
}

.prototype-controls #demo-reset {
  border-color: #d96c65;
  background: #54282266;
  color: #ffaaa3;
}

.prototype-controls #demo-reset.active {
  background: #71322c99;
  color: #ffd0cc;
}

.address-scroll {
  padding-bottom: 100px!important;
}

.address-form {
  display: flex;
  margin-top: 17px;
  padding: 16px;
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  flex-direction: column;
  gap: 12px;
}

.address-form > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.address-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 10px;
  font-weight: 750;
}

.address-form input,
.address-form textarea,
.address-form select {
  width: 100%;
  border: 1px solid #dfe3db;
  border-radius: 9px;
  background: #f0f1eb;
  color: #17221c;
  font-size: 11px;
  outline: none;
}

.address-form input {
  height: 38px;
  padding: 0 10px;
}

.address-form select {
  height: 38px;
  padding: 0 34px 0 10px;
  appearance: none;
  cursor: pointer;
}

.address-form select:disabled {
  color: #9aa29b;
  cursor: default;
  opacity: .78;
}

.select-field {
  position: relative;
  display: block;
}

.select-field::after {
  content: "⌄";
  position: absolute;
  top: 50%;
  right: 11px;
  color: #68756d;
  font-size: 14px;
  font-weight: 500;
  pointer-events: none;
  transform: translateY(-56%);
}

.address-form textarea {
  min-height: 76px;
  padding: 10px;
  resize: none;
}

.address-form input:focus,
.address-form textarea:focus,
.address-form select:focus {
  border-color: #8abb47;
  box-shadow: 0 0 0 2px #9fd25324;
}

@media (max-width: 760px) {
  .prototype-controls {
    top: auto;
    bottom: 10px;
    left: 8px;
    width: 94px;
    padding: 7px;
    transform: none;
  }
  .prototype-controls button {
    padding: 7px 6px;
    font-size: 8px;
  }
}

/* V31 — slow, touch-first editorial card drift; artwork moves without moving copy or CTA. */
.editorial-story {
  background: #031c15!important;
  isolation: isolate;
}

.editorial-story::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -8px;
  background:
    linear-gradient(90deg, #031c15e8 0%, #031c1570 45%, #031c150c 100%),
    linear-gradient(0deg, #031c15e8 0%, transparent 62%),
    url('mid-editorial-v1.png') center 78% / cover no-repeat;
  transform: translate3d(-2px, 1px, 0) rotate(-.65deg) scale(1.055);
  transform-origin: 54% 58%;
  animation: editorialCardDrift 7.2s cubic-bezier(.45, 0, .55, 1) infinite;
  will-change: transform;
  pointer-events: none;
}

.editorial-story::after {
  z-index: 1;
}

.editorial-story > span,
.editorial-story > i {
  z-index: 2;
}

@keyframes editorialCardDrift {
  0%, 100% {
    transform: translate3d(-2px, 1px, 0) rotate(-.65deg) scale(1.055);
  }
  48% {
    transform: translate3d(3px, -4px, 0) rotate(.55deg) scale(1.06);
  }
  72% {
    transform: translate3d(1px, -2px, 0) rotate(.2deg) scale(1.058);
  }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-story::before {
    animation: none;
    transform: scale(1.055);
  }
}

/* V32 — credentials, shared address book and e-commerce delivery selection. */
.credentials-scroll {
  padding: 0 12px 82px;
  color: #fff;
}

.credential-id-card {
  position: relative;
  overflow: hidden;
  min-height: 214px;
  padding: 13px 14px;
  border-radius: 20px;
  background: var(--paper);
  color: var(--ink);
}

.credential-id-card::after {
  content: "M";
  position: absolute;
  top: 47px;
  right: -12px;
  color: #e5e8df8c;
  font-size: 120px;
  font-weight: 900;
}

.credential-id-card > small {
  position: relative;
  z-index: 1;
  font-size: 8px;
  letter-spacing: .08em;
}

.credential-id-card header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 36px 1fr 124px;
  align-items: center;
  margin-top: 10px;
}

.credential-id-card header > div {
  display: flex;
  padding-left: 8px;
  flex-direction: column;
}

.credential-id-card header b {
  font-size: 13px;
}

.credential-id-card header small,
.credential-id-card header em {
  color: #6d766f;
  font-size: 8px;
  font-style: normal;
}

.credential-id-card header em {
  color: #263129;
  text-align: right;
}

.credential-id-card h2 {
  position: relative;
  z-index: 1;
  margin: 20px 0 5px;
  font-size: 27px;
}

.credential-id-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #7db43d;
  font-size: 12px;
  font-weight: 750;
}

.credential-id-card footer {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  font-size: 10px;
}

.credential-menu,
.stored-list {
  overflow: hidden;
  margin-top: 9px;
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
}

.credential-menu button {
  display: grid;
  width: 100%;
  min-height: 55px;
  grid-template-columns: 38px 1fr 14px;
  align-items: center;
  padding: 7px 12px;
  text-align: left;
}

.credential-menu button + button,
.stored-list > div + div {
  border-top: 1px solid #e4e6df;
}

.credential-menu button > i,
.stored-list > div > i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: #ddf4b2;
  color: #517c23;
  font-size: 17px;
  font-style: normal;
}

.credential-menu button:nth-child(even) > i {
  background: #d5e4ff;
  color: #2465a8;
}

.credential-menu button > span {
  display: flex;
  flex-direction: column;
}

.credential-menu b {
  font-size: 11px;
}

.credential-menu small {
  margin-top: 3px;
  color: #939b95;
  font-size: 8px;
}

.credential-menu em {
  color: #9da59f;
  font-size: 17px;
  font-style: normal;
}

.credential-menu #open-logistics {
  grid-template-columns: 38px 1fr auto;
}

.credential-menu .logistics-pending {
  display: flex;
  width: 34px;
  height: 22px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 11px;
  background: #fff1c9;
}

.credential-menu .logistics-pending[hidden],
.credential-menu .logistics-unread[hidden],
.credential-menu .logistics-arrow[hidden] {
  display: none!important;
}

.credential-menu .logistics-unread {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: #ef554e;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  box-shadow: 0 3px 9px #d7423b4d;
}

.logistics-pending > i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d9a32e;
  animation: logisticsDot 1.35s ease-in-out infinite;
}

.logistics-pending > i:nth-child(2) {animation-delay:.16s}
.logistics-pending > i:nth-child(3) {animation-delay:.32s}

@keyframes logisticsDot {0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}

.logistics-scroll {
  padding: 16px 14px 32px;
  color: #fff;
}

.logistics-card {
  overflow: hidden;
  border: 1px solid #36574b;
  border-radius: 20px;
  background: linear-gradient(145deg,#18382d,#112a22);
  box-shadow: inset 0 1px 0 #ffffff0d;
}

.logistics-card + .logistics-card {
  margin-top: 12px;
}

.order-status-card > header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 17px 16px 10px;
}

.order-status-card > header > i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: #ffffff12;
  color: #e7f0eb;
  font-size: 24px;
  font-style: normal;
}

.order-status-card > header > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-status-card > header b {
  font-size: 18px;
}

.order-status-card > header small {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #e3ae36;
  font-size: 12px;
}

.order-status-card > header small em {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f0b33a;
}

.order-status-card > header small.shipped {color:#aeda55}
.order-status-card > header small.shipped em {background:#aeda55}

.logistics-card dl {
  margin: 0;
  padding: 5px 16px 13px;
}

.logistics-card dl > div {
  display: grid;
  min-height: 48px;
  grid-template-columns: 105px minmax(0,1fr);
  align-items: center;
  border-top: 1px solid #ffffff0d;
}

.logistics-card dt {
  color: #98aaa2;
  font-size: 11px;
}

.logistics-card dd {
  margin: 0;
  color: #f4f7f5;
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
  overflow-wrap: anywhere;
}

.receiver-card h2 {
  margin: 0;
  padding: 18px 16px 9px;
  font-size: 18px;
}

.receiver-card dl > div:last-child {
  align-items: start;
  padding: 13px 0 4px;
}

.delivery-list-scroll {padding:14px 14px 30px;color:#fff}
.delivery-orders {display:flex;flex-direction:column;gap:12px}
.delivery-order {position:relative;display:grid;width:100%;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;padding:14px;border:1px solid #2f5145;border-radius:17px;background:linear-gradient(145deg,#17372c,#112a22);color:#fff;text-align:left}
.delivery-order > i {display:grid;width:38px;height:38px;place-items:center;border-radius:11px;background:#ffffff12;font-size:21px;font-style:normal}
.delivery-order > span {display:flex;padding-left:9px;flex-direction:column;gap:4px}
.delivery-order > span b {font-size:12px}.delivery-order > span small {display:flex;align-items:center;gap:6px;color:#e5af37;font-size:9px}
.delivery-order > span small em {width:5px;height:5px;border-radius:50%;background:#e5af37}.delivery-order > span small.shipped {color:#aeda55}.delivery-order > span small.shipped em{background:#aeda55}
.delivery-order > strong {padding:4px 7px;border-radius:9px;background:#ef554e;color:#fff;font-size:8px}
.delivery-chevron {color:#9caea6;font-size:18px;font-style:normal}
.delivery-order footer {grid-column:1/-1;display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid #ffffff0d;color:#8fa39a;font-size:9px}
.delivery-order footer time {font-style:normal}.delivery-order.unread {border-color:#c457507d;box-shadow:0 0 0 1px #c457502e}

@media (prefers-reduced-motion: reduce) {.logistics-pending > i{animation:none}}

.stored-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 12px 2px 6px;
}

.stored-title > span {
  display: flex;
  flex-direction: column;
}

.stored-title b {
  font-size: 17px;
}

.stored-title small {
  margin-top: 2px;
  color: #8da096;
  font-size: 8px;
}

.stored-title em {
  color: var(--lime);
  font-size: 10px;
  font-style: normal;
}

.stored-list {
  margin-top: 0;
}

.stored-list > div {
  display: grid;
  min-height: 61px;
  grid-template-columns: 42px 1fr;
  align-items: center;
  padding: 8px 12px;
}

.stored-list > div > span {
  display: flex;
  flex-direction: column;
}

.stored-list small,
.stored-list em {
  color: #9aa29c;
  font-size: 8px;
  font-style: normal;
}

.stored-list b {
  margin: 2px 0;
  font-size: 11px;
}

.address-book-scroll {
  padding: 14px 14px 92px;
  color: #fff;
}

.address-book-scroll > .saved-address-list:not([hidden]) {
  margin-top: 0;
}

.address-book-scroll > .address-empty:not([hidden]) {
  min-height: calc(100% - 14px);
}

.address-empty[hidden],
.saved-address-list[hidden],
.address-selection-list[hidden],
.add-address-inline[hidden],
#address-confirm-actions[hidden] {
  display: none!important;
}

.address-empty {
  display: flex;
  min-height: 330px;
  align-items: center;
  padding: 28px;
  text-align: center;
  flex-direction: column;
  justify-content: center;
}

.address-empty > i {
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  border: 1px solid #577267;
  border-radius: 50%;
  color: var(--lime);
  font-size: 28px;
  font-style: normal;
}

.address-empty h2,
.address-empty h3 {
  margin: 18px 0 7px;
  font-size: 20px;
}

.address-empty p {
  max-width: 270px;
  margin: 0;
  color: #91a59c;
  font-size: 11px;
  line-height: 1.55;
}

.address-empty button {
  margin-top: 20px;
  padding: 11px 18px;
  border-radius: 12px;
  background: var(--lime);
  color: #102017;
  font-size: 11px;
  font-weight: 800;
}

.saved-address-list,
.address-selection-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.saved-address-card,
.select-address-card {
  display: block;
  padding: 15px;
  border-radius: 17px;
  background: var(--paper);
  color: var(--ink);
}

.saved-address-card header,
.select-address-card header {
  display: flex;
  align-items: center;
  gap: 7px;
}

.saved-address-card header b,
.select-address-card header b {
  font-size: 14px;
}

.saved-address-card header span,
.select-address-card header small {
  margin-left: auto;
  color: #69736c;
  font-size: 10px;
}

.saved-address-card header em,
.select-address-card header em {
  padding: 2px 6px;
  border-radius: 5px;
  background: #e8f5d6;
  color: #67932f;
  font-size: 8px;
  font-style: normal;
}

.saved-address-card p,
.select-address-card p {
  margin: 9px 0 0;
  color: #475249;
  font-size: 11px;
  line-height: 1.55;
}

.saved-address-card footer {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e2e5de;
}

.saved-address-card footer button {
  color: #5c675f;
  font-size: 10px;
}

.saved-address-card footer button:last-child {
  color: #ba4f47;
}

.address-select-scroll {
  padding-bottom: 100px!important;
}

.address-select-scroll > .address-empty {
  min-height: 300px;
}

.address-selection-list {
  margin-top: 16px;
}

.select-address-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  border: 2px solid transparent;
  padding-left: 13px;
}

.select-address-card > span {
  min-width: 0;
}

.select-address-card.selected {
  border-color: #9ccd4e;
}

.select-address-card > input {
  position: absolute;
  opacity: 0;
}

.select-address-card > i {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid #bdc5be;
  border-radius: 50%;
  color: transparent;
  font-size: 10px;
  font-style: normal;
}

.select-address-card.selected > i {
  border-color: var(--lime);
  background: var(--lime);
  color: #102017;
}

.add-address-inline {
  width: 100%;
  margin-top: 11px;
  padding: 14px;
  border: 1px dashed #608076;
  border-radius: 14px;
  color: var(--lime);
  font-size: 11px;
  font-weight: 750;
}

.default-address {
  display: flex!important;
  align-items: center;
  flex-direction: row!important;
  gap: 8px!important;
}

.default-address input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.default-address span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid #aeb8b0;
  border-radius: 6px;
}

.default-address input:checked + span {
  border-color: var(--lime);
  background: var(--lime);
}

.default-address input:checked + span::after {
  content: "✓";
  color: #102017;
  font-size: 11px;
  font-weight: 900;
}


/* V25 — compact JD-style mobile checkout hierarchy. */
.payment-step-line {
  margin: 10px 42px 18px;
  grid-template-columns: 22px 1fr 22px;
}

.payment-step-line b,
.payment-step-line span {
  width: 22px;
  height: 22px;
}

.payment-step-line small:nth-of-type(1) {
  top: 27px;
  left: -2px;
}

.payment-step-line small:nth-of-type(2) {
  top: 27px;
  right: -3px;
  left: auto;
}

.checkout-scroll {
  padding: 18px 14px 100px;
}

.checkout-product-card,
.checkout-options {
  overflow: hidden;
  border: 1px solid #ffffff80;
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 7px 18px #00160f24;
}

.checkout-product-card {
  padding: 14px 15px 15px;
}

.checkout-product-card h2 {
  margin: 0;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 750;
}

.checkout-item {
  min-height: 64px;
  padding-top: 13px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
}

.checkout-item > span {
  display: flex;
  flex-direction: column;
}

.checkout-item b {
  font-size: 13px;
}

.checkout-item small {
  margin-top: 4px;
  color: #889089;
  font-size: 9px;
}

.checkout-item > strong {
  font-size: 13px;
}

.checkout-options {
  margin-top: 10px;
}

.coupon-line {
  position: relative;
  min-height: 58px;
  padding: 0 15px;
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 10px;
  align-items: center;
}

.coupon-line input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.coupon-disabled-check {
  position: relative;
  width: 20px;
  height: 20px;
  border: 1.5px solid #aab6af;
  border-radius: 5px;
  background: #e5ebe7;
  box-shadow: inset 0 1px 1px #ffffff;
}

.coupon-disabled-check::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  color: #7b9185;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
}

.coupon-line b {
  font-size: 12px;
  font-weight: 720;
}

.coupon-line > strong {
  color: #5e8d20;
  font-size: 12px;
}

.payable-line {
  min-height: 66px;
  margin-left: 45px;
  padding: 0 15px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.payable-line span {
  font-size: 12px;
}

.payable-line strong {
  color: #5f8d25;
  font-size: 23px;
  letter-spacing: -.4px;
}

.checkout-scroll .agreement {
  margin: 17px 6px;
}

.checkout-sticky {
  min-height: 68px;
  padding: 9px 14px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid #dce3dc;
  background: var(--paper);
  display: flex;
  align-items: center;
  gap: 12px;
}

.checkout-pay-summary {
  min-width: 0;
  flex: 1;
  color: var(--ink);
  display: flex;
  flex-direction: column;
}

.checkout-pay-summary span {
  color: #707a72;
  font-size: 9px;
}

.checkout-pay-summary strong {
  margin-top: 2px;
  color: #5f8d25;
  font-size: 22px;
  line-height: 1;
}

.checkout-sticky .primary {
  width: 148px;
  height: 46px;
  flex: 0 0 148px;
  border-radius: 23px;
  font-size: 13px;
}

.checkout-sticky .primary:disabled {
  background: #dfe5e0;
  color: #9ca8a0;
}

/* V24 — conventional commerce checkout coupon selection. */
.checkout-product {
  padding: 16px;
}

.checkout-product header {
  padding-bottom: 0;
  border-bottom: 0;
}

.coupon-select {
  position: relative;
  min-height: 70px;
  margin-top: 10px;
  padding: 13px 16px;
  border: 1px solid #ffffff80;
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 11px;
  align-items: center;
}

.coupon-select input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.coupon-check {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--lime);
  box-shadow: inset 0 1px 0 #ffffff99;
}

.coupon-check::after {
  content: "\2713";
  width: 100%;
  height: 100%;
  color: #0a2118;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
}

.coupon-name {
  display: flex;
  flex-direction: column;
}

.coupon-name small {
  color: #889089;
  font-size: 9px;
  line-height: 1.2;
}

.coupon-name b {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.2;
}

.coupon-select > strong {
  color: #5e8d20;
  font-size: 13px;
}

.checkout-total {
  min-height: 76px;
  margin-top: 10px;
  padding: 16px;
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.checkout-total span {
  font-size: 13px;
}

.checkout-total strong {
  color: #5f8d25;
  font-size: 25px;
  letter-spacing: -.5px;
}

.detail-floating-apply {
  border-color: #8aa99c99;
  background: linear-gradient(135deg, #19483aee, #0c3126fa);
  box-shadow: 0 15px 34px #00110dc2, inset 0 1px 0 #ffffff12;
}

.detail-floating-apply small {
  color: #b2c3bb;
  font-weight: 700;
}

.detail-floating-apply > span > b s {
  color: #a9b6af;
  font-size: 15px;
}

.detail-floating-apply > span > b strong {
  font-size: 28px;
  letter-spacing: -1px;
}

.detail-floating-apply > span > em {
  color: #b0c1b9;
  font-size: 7px;
}

.detail-floating-apply > button {
  background: linear-gradient(180deg, #d3ff5a, #bdff2d);
  font-size: 11px;
  box-shadow: inset 0 1px 0 #ffffff70, 0 8px 18px #bfff2e24;
}

/* V13 — Chinese typography calibration across the prototype. */
html,
body,
button,
input {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Segoe UI", sans-serif;
}

.mid-entry {
  padding: 18px 16px 15px;
}

.eyebrow {
  font-size: 8.5px;
  letter-spacing: 1.35px;
}

.mid-entry-top {
  margin-top: 10px;
}

.mid-entry-top b {
  font-size: 14.5px;
  line-height: 1.25;
}

.mid-entry-top small {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.35;
}

.mid-entry-top em {
  font-size: 10.5px;
  letter-spacing: .05px;
}

.mid-entry > strong {
  margin: 17px 0 8px;
  font-size: 27px;
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -.7px;
  text-transform: none;
}

.mid-entry mark {
  display: inline-block;
  margin-top: 2px;
}

.entry-copy {
  max-width: 100%;
  font-size: 11.5px;
  line-height: 1.55;
  letter-spacing: .02px;
}

.entry-cta {
  height: 37px;
  margin-top: 14px;
  font-size: 12.5px;
  letter-spacing: .15px;
}

.home-assets > header > span {
  font-size: 13.5px;
}

.payment-actions b,
.asset-actions button {
  font-size: 11.5px;
  line-height: 1.3;
}

.home-list-card h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  line-height: 1.25;
}

.home-list-card h2 span {
  padding: 4px 7px;
  font-size: 8.5px;
  line-height: 1;
  vertical-align: 0;
}

.home-list-card header button {
  font-size: 10.5px;
  line-height: 1.3;
}

.home-list-row {
  min-height: 55px;
}

.home-list-row > span b {
  font-size: 12px;
  line-height: 1.35;
}

.home-list-row > span small {
  margin-top: 3px;
  font-size: 9px;
  line-height: 1.4;
}

.home-list-row > em {
  font-size: 9.5px;
  line-height: 1.2;
}

.editorial-intro h2 {
  margin: 8px 0 8px;
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -.45px;
}

.editorial-intro p {
  max-width: 100%;
  font-size: 10.5px;
  line-height: 1.62;
}

.editorial-points > span {
  grid-template-columns: 23px 96px 1fr;
  min-height: 38px;
}

.editorial-points b {
  font-size: 10px;
  line-height: 1.35;
}

.editorial-points small {
  font-size: 8.5px;
  line-height: 1.45;
}

.editorial-story b {
  font-size: 12.5px;
  line-height: 1.35;
  letter-spacing: .05px;
}

.slide h2 {
  line-height: 1.15;
  letter-spacing: -.45px;
}

.slide p,
.application-scroll > p,
.face-copy p {
  line-height: 1.65;
}

.document-list b,
.identity-form label,
.primary {
  line-height: 1.35;
}

.identity-form > div > label,
.identity-form input {
  min-width: 0;
  width: 100%;
}

@media (max-height: 700px) {
  .mid-entry > strong {
    margin-top: 14px;
    font-size: 25px;
  }

  .entry-copy {
    font-size: 10.5px;
  }

  .editorial-intro h2 {
    font-size: 22px;
  }
}

/* V14 — compact MID hierarchy and readable two-line offer bar. */
.mid-entry > strong {
  margin-top: 17px;
  margin-bottom: 9px;
}

.mid-entry > strong mark {
  margin: 0;
}

.entry-copy {
  color: #52615a;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
}

.editorial-intro h2 {
  margin-top: 0;
}

.editorial-points > span {
  min-height: 47px;
  grid-template-columns: 23px 82px 1fr;
}

.editorial-points small {
  font-size: 8.6px;
  line-height: 1.5;
}

.editorial-story {
  min-height: 138px;
  flex: 1 1 auto;
  background-position: center 78%;
}

.detail-floating-apply {
  grid-template-columns: 1fr 130px;
}

.detail-floating-apply small {
  color: #d8e5de;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .45px;
}

.detail-floating-apply > span > b {
  margin-top: 5px;
}

.detail-floating-apply > span > b s {
  font-size: 15px;
}

.detail-floating-apply > span > b strong {
  font-size: 29px;
}

.detail-floating-apply > button {
  width: 130px;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .1px;
}

/* V15 — App Store-style editorial action treatment. */
.editorial-story {
  border-color: #8ca7757d;
  box-shadow: inset 0 -72px 80px #00140dc7, 0 12px 28px #00130c5c;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), border-color .25s ease, box-shadow .25s ease, filter .25s ease;
}

.editorial-story > span {
  right: 62px;
  bottom: 11px;
  left: 11px;
  min-height: 49px;
  padding: 9px 11px;
  justify-content: center;
  border: 1px solid #9aad8c40;
  border-radius: 13px;
  background: linear-gradient(135deg, #0b3025d9, #061f18c7);
  box-shadow: inset 0 1px 0 #ffffff10, 0 8px 20px #00110b66;
  backdrop-filter: blur(12px);
}

.editorial-story small {
  font-size: 8px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: .65px;
}

.editorial-story b {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.25;
}

.editorial-story > i {
  right: 11px;
  bottom: 11px;
  width: 49px;
  height: 49px;
  border: 1px solid #e8ffb366;
  box-shadow: inset 0 1px 0 #ffffff80, 0 9px 22px #bfff2f38;
}

.editorial-story:active {
  transform: translateY(0) scale(.985);
  filter: brightness(.94);
}

/* V16 — integrated editorial card and four scenario-led story chapters. */
.editorial-story > span {
  right: 58px;
  bottom: 17px;
  left: 16px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}

.editorial-story small {
  font-size: 8px;
  letter-spacing: .7px;
}

.editorial-story b {
  margin-top: 6px;
  font-size: 13px;
}

.editorial-story > i {
  right: 17px;
  bottom: 20px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--lime);
  font-size: 21px;
  box-shadow: none;
}

.slide,
.slide.active {
  padding: 8px 20px 10px;
}

.slide-art.feature-art {
  position: relative;
  height: 232px;
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid #7fa38e55;
  border-radius: 24px;
  box-shadow: inset 0 1px 0 #ffffff0d, 0 14px 34px #00120c73;
}

.slide-art.feature-art::before {
  width: 190px;
  height: 190px;
  border-color: #c9ff3d27;
  box-shadow: 0 0 70px #c9ff3d12;
}

.slide-art.feature-art::after {
  width: 126px;
  height: 126px;
  border-color: #d6ff7952;
}

.banking-art {
  background: radial-gradient(circle at 50% 50%, #487d5d 0%, #143f31 35%, #05251c 72%, #031a14 100%);
}

.wallet-art {
  background: radial-gradient(circle at 50% 48%, #7d7135 0%, #324d32 31%, #092b22 68%, #031a14 100%);
}

.business-art {
  background: radial-gradient(circle at 50% 45%, #51725f 0%, #173d31 34%, #07271e 70%, #031a14 100%);
}

.trust-art {
  background: radial-gradient(circle at 50% 48%, #3f7152 0%, #123c2e 34%, #06261d 72%, #031a14 100%);
}

.feature-scene {
  position: absolute;
  inset: 0;
}

.feature-scene span {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #f8fbf7;
  font-size: inherit;
}

.scene-core {
  top: 50%;
  left: 50%;
  width: 104px;
  height: 104px;
  border: 1px solid #e4efcf70;
  border-radius: 50%;
  background: linear-gradient(145deg, #f4f0d7, #b9a466 45%, #546b37 100%);
  color: #10261c!important;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 2px 0 #ffffff9c, 0 0 0 10px #c9ff3d0b, 0 18px 35px #00120c8f;
}

.scene-core b {
  max-width: 90px;
  font-size: 21px;
  line-height: 1;
  letter-spacing: -.5px;
}

.scene-core small {
  margin-top: 7px;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1px;
}

.scene-node {
  width: 78px;
  height: 55px;
  border: 1px solid #d8e8d45c;
  border-radius: 15px;
  background: linear-gradient(145deg, #edf1ddb8, #91aa75a6 48%, #244b38c2);
  box-shadow: inset 0 1px 0 #ffffff80, 0 10px 22px #00140da3;
  backdrop-filter: blur(8px);
}

.scene-node i {
  color: #fff7cf;
  font-size: 19px;
  font-style: normal;
  line-height: 1;
  text-shadow: 0 2px 8px #00150e80;
}

.scene-node b {
  margin-top: 6px;
  font-size: 8px;
  letter-spacing: .3px;
}

.scene-node.node-one { top: 25px; left: 22px; }
.scene-node.node-two { top: 25px; right: 22px; }
.scene-node.node-three { right: 28px; bottom: 21px; }

.scene-path {
  position: absolute;
  z-index: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d6ff71, transparent);
  box-shadow: 0 0 8px #c9ff3d8a;
  transform-origin: left center;
}

.path-one { top: 77px; left: 89px; width: 86px; transform: rotate(24deg); }
.path-two { top: 78px; right: 89px; width: 86px; transform: rotate(156deg); transform-origin: right center; }
.path-three { right: 90px; bottom: 67px; width: 92px; transform: rotate(151deg); transform-origin: right center; }

.slide-body > small {
  color: #c9ff3d;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 1.25px;
}

.slide-body h2 {
  margin: 8px 0 9px;
  font-size: 27px;
  line-height: 1.08;
  letter-spacing: -.55px;
}

.slide-body p {
  color: #b3c5bc;
  font-size: 11.2px;
  line-height: 1.62;
}

.slide-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 13px;
  margin-top: 13px;
  color: #dbe8e1;
  font-size: 8.5px;
}

.slide-highlights span {
  position: relative;
  padding-left: 10px;
}

.slide-highlights span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 7px #c9ff3d80;
  transform: translateY(-50%);
}

.story-footer {
  position: relative;
  height: 44px;
  flex: 0 0 44px;
  padding: 10px 20px 16px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: height .45s cubic-bezier(.22, 1, .36, 1), flex-basis .45s cubic-bezier(.22, 1, .36, 1);
}

.story-overlay.final .story-footer {
  height: 90px;
  flex-basis: 90px;
}

.story-footer .dots {
  width: 100%;
  display: flex;
  gap: 8px;
}

.story-footer .dots button,
.story-footer .dots button.active {
  width: auto;
  height: 4px;
  flex: 1;
  padding: 0;
  border-radius: 6px;
  background: #587168;
}

.story-footer .dots button.completed {
  background: #a8d947;
}

.story-footer .dots button.active {
  background: var(--lime);
  box-shadow: 0 0 10px #c9ff3d4d;
}

.story-apply {
  position: absolute;
  bottom: 31px;
  left: 50%;
  width: 146px;
  height: 42px;
  border-radius: 13px;
  background: var(--lime);
  color: #092017;
  font-size: 13px;
  font-weight: 850;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px) scale(.96);
  transition: opacity .25s ease, transform .45s cubic-bezier(.22, 1, .36, 1), filter .2s;
}

.story-overlay.final .story-apply {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

.story-apply:active {
  filter: brightness(.9);
  transform: translate(-50%, 0) scale(.94)!important;
}

@media (max-height: 700px) {
  .slide-art.feature-art {
    height: 185px;
    margin-bottom: 12px;
  }

  .slide-body h2 {
    font-size: 23px;
  }

  .slide-body p {
    font-size: 10px;
    line-height: 1.52;
  }

  .slide-highlights {
    margin-top: 8px;
  }
}

/* V17 — final navigation cleanup and overlay chrome. */
.detail-nav {
  height: 42px;
  border-bottom: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.detail-nav::after {
  display: none;
  content: none;
}

.editorial-brand {
  grid-template-columns: 38px 1fr;
}

.editorial-story > span {
  right: 96px;
}

.editorial-story > i {
  right: 15px;
  bottom: 15px;
  width: 73px;
  height: 38px;
  border: 1px solid #ffffff1f;
  border-radius: 20px;
  background: #dce7e02e;
  color: #f6faf7;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 750;
  letter-spacing: .2px;
  box-shadow: inset 0 1px 0 #ffffff24, 0 8px 18px #00110b52;
  backdrop-filter: blur(12px);
  transform: none;
  transition: background .22s ease, transform .25s cubic-bezier(.22, 1, .36, 1), filter .2s;
}

.editorial-story:active > i {
  transform: scale(.94);
}

.story-overlay {
  padding-top: 0;
}

.story-statusbar {
  height: 28px;
  flex: 0 0 28px;
  padding: 7px 18px 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.story-statusbar span {
  font-size: 10px;
  letter-spacing: 1px;
}

.story-head {
  height: 46px;
  padding: 0 15px;
  justify-content: flex-start;
}

.story-head button {
  width: 36px;
  height: 36px;
  font-size: 21px;
}

/* V18 — restored full-width home card with relaxed spacing. */
.mid-entry {
  padding: 18px 16px 16px;
}

.mid-entry-top {
  margin-top: 0;
}

.mid-entry > strong {
  margin: 18px 0 11px;
}

.entry-copy {
  font-size: 10.8px;
  line-height: 1.55;
}

.entry-cta {
  height: 37px;
  margin-top: 16px;
}

/* V19 — borderless MID detail canvas after removing the redundant brand row. */
.mid-overview {
  padding: 8px 16px 14px;
}

.mid-editorial-panel {
  height: calc(100% - 80px);
  padding: 8px 0 13px;
  gap: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.editorial-intro {
  padding: 0 2px;
}

.editorial-intro h2 {
  margin: 0 0 9px;
  font-size: 29px;
  line-height: 1.1;
  letter-spacing: -.55px;
}

.editorial-intro p {
  max-width: 100%;
  font-size: 10.8px;
  line-height: 1.62;
}

.editorial-points > span {
  min-height: 49px;
  grid-template-columns: 24px 92px 1fr;
}

.editorial-points b {
  font-size: 10.5px;
}

.editorial-points small {
  font-size: 8.8px;
  line-height: 1.5;
}

.editorial-story {
  min-height: 138px;
  flex: 1 1 auto;
}

/* V20 — professional mobile promotional typography scale. */
.editorial-intro h2 {
  margin-bottom: 11px;
  font-size: 32px;
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -.7px;
}

.editorial-intro p {
  font-size: 14px;
  font-weight: 450;
  line-height: 1.55;
  letter-spacing: .02px;
}

.editorial-points > span {
  min-height: 58px;
  grid-template-columns: 25px 92px 1fr;
}

.editorial-points i {
  width: 19px;
  height: 19px;
  font-size: 9px;
}

.editorial-points b {
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
}

.editorial-points small {
  font-size: 12px;
  line-height: 1.5;
}

.editorial-story small {
  font-size: 10px;
  line-height: 1.3;
}

.editorial-story b {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.35;
}

.editorial-story > i {
  width: 78px;
  height: 40px;
  border-radius: 21px;
  font-size: 12px;
}

.detail-floating-apply {
  height: 72px;
}

.detail-floating-apply small {
  font-size: 11px;
  line-height: 1.25;
}

.detail-floating-apply > span > b s {
  font-size: 17px;
}

.detail-floating-apply > span > b i {
  font-size: 11px;
}

.detail-floating-apply > span > b strong {
  font-size: 32px;
}

.detail-floating-apply > button {
  height: 54px;
  font-size: 15px;
}

/* V21 — restrained attention cue for the story detail action. */
.editorial-story > i {
  position: absolute;
  isolation: isolate;
  overflow: hidden;
  width: 82px;
  height: 42px;
  border-color: #d6ff6b5c;
  border-radius: 22px;
  background:
    linear-gradient(145deg, #f5fff12e 0%, #cde0d322 55%, #b9d0c01c 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 780;
  letter-spacing: .25px;
  box-shadow:
    inset 0 1px 0 #ffffff4a,
    inset 0 -1px 0 #0a1f1659,
    0 8px 20px #00130d73,
    0 0 0 0 #c9ff3d00;
  backdrop-filter: blur(14px) saturate(1.16);
  animation: none;
}

.editorial-story > i::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40%;
  bottom: -40%;
  left: -35%;
  width: 26px;
  background: linear-gradient(90deg, transparent, #ffffff66, transparent);
  transform: translateX(-65px) skewX(-18deg);
  animation: storyDetailSheen 4.2s cubic-bezier(.4, 0, .2, 1) infinite;
  pointer-events: none;
}

.editorial-story:active > i {
  animation-play-state: paused;
  transform: scale(.95);
  filter: brightness(1.08);
}

@keyframes storyDetailBreathe {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 #ffffff4a,
      inset 0 -1px 0 #0a1f1659,
      0 8px 20px #00130d73,
      0 0 0 0 #c9ff3d00;
  }
  50% {
    box-shadow:
      inset 0 1px 0 #ffffff66,
      inset 0 -1px 0 #0a1f1642,
      0 10px 24px #00130d80,
      0 0 0 5px #c9ff3d12;
  }
}

@keyframes storyDetailSheen {
  0%, 48% { transform: translateX(-65px) skewX(-18deg); opacity: 0; }
  55% { opacity: .8; }
  83%, 100% { transform: translateX(130px) skewX(-18deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-story > i,
  .editorial-story > i::after {
    animation: none;
  }
}

/* V23 — premium story campaign artwork and touch-first controls. */
.slides {
  touch-action: pan-y;
  user-select: none;
}

.slide-art.story-image {
  position: relative;
  height: 232px;
  flex: 0 0 232px;
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid #8ba18f66;
  border-radius: 24px;
  background-position: center;
  background-size: cover;
  box-shadow:
    inset 0 1px 0 #ffffff14,
    0 15px 34px #00110b7a;
}

.slide-art.story-image::before {
  display: none;
  content: none;
}

.slide-art.story-image::after {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, #ffffff08 0%, transparent 34%, #00130c1f 100%),
    radial-gradient(circle at 50% 36%, transparent 48%, #00140d26 100%);
  box-shadow: inset 0 0 0 1px #dff5e00a;
  pointer-events: none;
}

.banking-image {
  background-image: url('mid-story-banking-v2.png');
}

.company-image {
  background-image: url('mid-story-company-v2.png');
}

.wallet-image {
  background-image: url('mid-story-wallet-v2.png');
}

.trust-image {
  background-image: url('mid-story-trust-v2.png');
}

.slide-body h2 {
  margin-top: 0;
}

.slide-body p {
  font-size: 11.6px;
  line-height: 1.65;
}

.story-apply {
  right: 20px;
  left: 20px;
  width: auto;
  height: 46px;
  border-radius: 15px;
  transform: translateY(8px) scale(.98);
}

.story-overlay.final .story-apply {
  transform: translateY(0) scale(1);
}

.story-apply:active {
  transform: scale(.97)!important;
}

@media (max-height: 700px) {
  .slide-art.story-image {
    height: 184px;
    flex-basis: 184px;
    margin-bottom: 12px;
  }

  .slide-body p {
    font-size: 10.4px;
    line-height: 1.55;
  }
}

/* V26 final — preserve the original payment progress and bottom action layout. */
.checkout-nav {
  border-bottom: 0;
}

.payment-progress {
  height: 16px;
  flex: 0 0 16px;
  padding: 6px 14px 7px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.payment-progress i {
  height: 2px;
  border-radius: 3px;
  background: #6d7f776e;
}

.payment-progress i.active {
  background: var(--lime);
  box-shadow: 0 0 6px #c9ff3d36;
}

.checkout-scroll {
  padding-top: 12px;
  padding-bottom: 118px;
}

.checkout-sticky {
  min-height: 112px;
  padding: 8px 14px max(12px, env(safe-area-inset-bottom));
  border-top: 0;
  background: linear-gradient(transparent, #002219 17%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.checkout-sticky .agreement {
  width: 100%;
  min-height: 28px;
  margin: 0;
  padding: 0 2px;
  align-items: center;
  color: #b8c7c0;
  font-size: 9px;
}

.checkout-sticky .agreement span {
  width: 18px;
  height: 18px;
  border-radius: 5px;
}

.checkout-sticky .primary {
  width: 100%;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 14px;
  font-size: 13px;
}

.checkout-sticky .primary:disabled {
  background: #31574b;
  color: #81978f;
}