@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,SOFT,WONK,wght@9..144,0,1,700&family=Plus+Jakarta+Sans:wght@500;600&display=swap");

/* Locked to Figma 1012×638, node 1086:6. 1cqw = 1% of card width. */
.mmc {
  --mmc-navy: #071432;
  --mmc-mid: #0a2f6e;
  --mmc-brand: #0b57d0;
  --mmc-white: #ffffff;
  --mmc-muted: #d1d7dc;
  --mmc-label: #bec5cc;
  --mmc-shell: #25282b;
  --mmc-qr-border: rgb(190 197 204 / 0.35);
  --mmc-shadow: 0 18px 16px rgb(20 23 26 / 0.28);
  container-type: inline-size;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1012 / 638;
  color: var(--mmc-white);
  background: transparent;
  filter: drop-shadow(var(--mmc-shadow));
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

.mmc[data-tier="associate"] {
  --mmc-muted: #d1e3fa;
  --mmc-label: #bad6ff;
  --mmc-shell: #071432;
  --mmc-qr-border: rgb(186 214 255 / 0.35);
  --mmc-shadow: 0 18px 16px rgb(10 20 38 / 0.22);
}

.mmc[data-tier="gold"] {
  --mmc-muted: #ffeeb2;
  --mmc-label: #ffeeb2;
  --mmc-shell: #331f08;
  --mmc-qr-border: rgb(255 238 178 / 0.4);
  --mmc-shadow: 0 18px 16px rgb(51 31 8 / 0.28);
}

.mmc-shell {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 2.767cqw;
  background: var(--mmc-shell);
  isolation: isolate;
}

.mmc-plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.mmc-content {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  padding: 3.557cqw 3.953cqw;
}

.mmc-header {
  display: flex;
  align-items: top;
  justify-content: space-between;
  gap: 1.581cqw;
}

.mmc-brand {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.198cqw;
}

.mmc-wordmark {
  margin: 0;
  font-family: Fraunces, Georgia, serif;
  font-size: 3.557cqw;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.04cqw;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  color: var(--mmc-white);
}

.mmc[data-tier="executive"] .mmc-wordmark {
  background-image: url("assets/aluminium-metal-texture.jpg");
  background-size: contain;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mmc[data-tier="gold"] .mmc-wordmark {
  background-image: url("assets/gold-metal-texture.jpg");
  background-size: contain;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mmc-org {
  margin: 0;
  font-size: 1.778cqw;
  font-weight: 500;
  line-height: 1.25;
  color: var(--mmc-muted);
  opacity: 0.85;
}

.mmc-logo {
  flex-shrink: 0;
  width: 13.5cqw;
  height: 12.6cqw;
  object-fit: contain;
  /* Figma 1113:20 — Drop shadow 0 / 4 / 4 / #000 25% */
  filter: drop-shadow(0 0.395cqw 0.395cqw rgb(0 0 0 / 0.25));
}

.mmc-identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.372cqw;
  min-height: 0;
}

.mmc-who {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0.988cqw;
}

.mmc-kicker {
  margin: 0;
  font-size: 1.581cqw;
  font-weight: 600;
  letter-spacing: 0.217cqw;
  color: var(--mmc-label);
}

.mmc-name {
  margin: 0;
  font-family: Fraunces, Georgia, serif;
  font-size: 6.324cqw;
  font-weight: 700;
  line-height: 1.1;
  overflow-wrap: anywhere;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.mmc-type {
  margin: 0;
  font-size: 2.372cqw;
  font-weight: 500;
  color: var(--mmc-muted);
}

.mmc-qr {
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0.988cqw;
  overflow: hidden;
  border: 1px solid var(--mmc-qr-border);
  border-radius: 1.778cqw;
  background: var(--mmc-white);
}

.mmc-qr img {
  display: block;
  width: 12.649cqw;
  height: 12.649cqw;
  object-fit: contain;
}

.mmc-qr-slot {
  width: 12.649cqw;
  height: 12.649cqw;
  background: #f3f7ff;
}

.mmc-footer {
  display: flex;
  flex-direction: column;
  gap: 1.778cqw;
}

.mmc-hairline {
  height: 1px;
  width: 100%;
  background: rgb(255 255 255 / 0.22);
}

.mmc-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.372cqw;
}

.mmc-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.791cqw;
}

.mmc-label {
  margin: 0;
  font-size: 1.383cqw;
  font-weight: 500;
  letter-spacing: 0.178cqw;
  color: var(--mmc-label);
}

.mmc-value {
  margin: 0;
  font-size: 2.569cqw;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.slide .mmc {
  max-width: 28rem;
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

.plate-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  width: min(100%, 68rem);
  margin-top: 1.2rem;
}

.plate-row .mmc {
  max-width: none;
}

.plate-cap {
  margin-top: 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(29, 29, 31, 0.48);
}

.vis-split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.4rem, 3vw, 2.8rem);
  align-items: center;
  width: min(100%, 64rem);
}

.digital-id {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #d1d6de;
  background: #fff;
  color: #141820;
  max-width: 22.5rem;
  box-shadow: 0 18px 40px rgb(20 26 38 / 0.12);
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

.digital-id-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  background: #0b57d0;
  color: #fff;
  padding: 1rem 1.5rem;
}

.digital-id-head .brand {
  font-family: Fraunces, Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.digital-id-head .org {
  margin-top: 0.15rem;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.025em;
  color: rgb(255 255 255 / 0.8);
}

.digital-id-head .chip {
  border-radius: 999px;
  background: rgb(255 255 255 / 0.2);
  padding: 0.25rem 0.75rem;
  font-size: 12px;
  font-weight: 600;
}

.digital-id-body {
  padding: 1.5rem;
  text-align: center;
}

.digital-id-photo {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 999px;
  background: #e5eefc;
  color: #0b57d0;
  display: grid;
  place-items: center;
  font-family: Fraunces, Georgia, serif;
  font-size: 22px;
  font-weight: 700;
}

.digital-id-body .name {
  margin-top: 0.75rem;
  font-family: Fraunces, Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.digital-id-body .tier {
  margin-top: 0.25rem;
  font-size: 14px;
  color: #5a6573;
}

.digital-id-body .mid {
  margin-top: 0.5rem;
  font-size: 13px;
  color: #5a6573;
}

.digital-id-body .mid strong {
  color: #141820;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.digital-id-qr {
  margin: 1rem auto 0;
  display: inline-flex;
  padding: 0.75rem;
  border-radius: 16px;
  border: 1px solid #d1d6de;
  background: #fff;
}

.digital-id-qr img {
  width: 180px;
  height: 180px;
  display: block;
  border-radius: 8px;
  background: #fff;
}

.digital-id-hint {
  margin-top: 1rem;
  font-size: 13px;
  color: #5a6573;
}

.wave-hero-slide {
  align-items: center;
  text-align: center;
}

.wave-hero-name {
  max-width: none;
  font-size: clamp(2.8rem, 7.2vw, 6.2rem);
  font-weight: 590;
  letter-spacing: -0.055em;
  line-height: 1.05;
}

.wave-hero-line {
  margin-top: 0.55rem;
  margin-bottom: 0;
  max-width: none;
}

.wave-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(1.6rem, 4vw, 2.8rem);
}

.wave-hero .wave-code {
  margin-top: 0;
}

.wave-hero .wave-plate {
  --wave-mark: 96px;
  padding: 1.35rem 1.55rem;
  box-shadow: 0 22px 48px rgb(20 26 38 / 0.1);
}

.wave-hero .wave-caption {
  font-size: 0.82rem;
}

.wave-hero .wave-human {
  margin-top: 1rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--mute);
}

.slide.theme-light .wave-hero .wave-human {
  color: var(--mute);
}

.teaser .wave-caption {
  color: rgba(245, 245, 247, 0.88);
}

.ticket-stub {
  background: #fff;
  color: #141820;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgb(20 26 38 / 0.14);
  border: 1px solid #d1d6de;
  max-width: 22rem;
}

.ticket-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(145deg, #0a2f6e 0%, #0b57d0 100%);
  overflow: hidden;
}

.ticket-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ticket-cover-copy {
  position: absolute;
  inset: auto 0 0;
  padding: 1rem 1.1rem 1.05rem;
  background: linear-gradient(180deg, transparent, rgb(10 20 40 / 0.82));
  color: #fff;
}

.ticket-cover-copy h3 {
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

.ticket-cover-copy p,
.ticket-meta {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  opacity: 0.9;
}

.ticket-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.ticket-meta svg {
  flex-shrink: 0;
  opacity: 0.95;
}

.ticket-body {
  padding: 0.85rem 1.1rem 1.15rem;
  border-top: 1px dashed #d1d6de;
}

.ticket-row {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.28rem 0;
  font-size: 0.8rem;
}

.ticket-row span {
  color: #5a6573;
  font-weight: 600;
}

.ticket-row strong {
  font-weight: 550;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ticket-chip {
  margin: 0.75rem auto 0;
  width: fit-content;
  border-radius: 999px;
  background: #e8eefc;
  color: #0b57d0;
  padding: 0.32rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 650;
}

.wave-code {
  margin-top: 0.85rem;
  width: fit-content;
  max-width: 100%;
}

.wave-plate {
  --wave-mark: 56px;
  --wave-strip-w: calc(var(--wave-mark) * 240 / 64);
  border-radius: 16px;
  border: 1px solid #d1d6de;
  background: #fff;
  padding: 0.85rem 0.9rem;
  width: fit-content;
  max-width: 100%;
}

.wave-plate-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: fit-content;
  max-width: 100%;
}

.wave-mark {
  flex-shrink: 0;
  width: var(--wave-mark);
  height: var(--wave-mark);
  overflow: hidden;
  border-radius: 999px;
  background: #fff;
}

.wave-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
}

.wave-strip {
  flex: 0 1 var(--wave-strip-w);
  width: var(--wave-strip-w);
  height: var(--wave-mark);
  min-width: 0;
}

.wave-strip svg {
  display: block;
  width: 100%;
  height: var(--wave-mark);
}

.wave-caption {
  margin-top: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: #141820;
}

.wave-caption svg {
  display: block;
  flex-shrink: 0;
}

.wave-human {
  margin-top: 0.85rem;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  font-weight: 560;
  color: #1d1d1f;
}

.slide.theme-light .wave-human {
  color: #1d1d1f;
}

.ui-panel {
  width: min(100%, 26rem);
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #d1d6de;
  background: #fff;
  color: #141820;
  box-shadow: 0 4px 16px rgb(26 31 46 / 0.06);
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

.ui-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.85rem 1.05rem;
  border-bottom: 1px solid #e8ebf0;
  background: #f7f8fa;
}

.ui-panel-head strong {
  font-size: 0.92rem;
  letter-spacing: -0.02em;
}

.ui-panel-head span,
.ui-chip {
  border-radius: 999px;
  background: #e8eefc;
  color: #0a2f6e;
  padding: 0.18rem 0.65rem;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ui-panel-body {
  padding: 1rem 1.05rem 1.15rem;
}

.ui-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5a6573;
  font-weight: 650;
}

.ui-panel h3 {
  margin-top: 0.35rem;
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

.ui-muted {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #5a6573;
}

.ui-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.9rem;
}

.ui-steps b {
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 650;
  background: #eef1f5;
  color: #5a6573;
}

.ui-steps b.is-on {
  background: #0b57d0;
  color: #fff;
}

.ui-field {
  display: grid;
  gap: 0.18rem;
  margin-top: 0.55rem;
}

.ui-field label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a6573;
  font-weight: 650;
}

.ui-field p {
  border: 1px solid #d1d6de;
  border-radius: 10px;
  padding: 0.45rem 0.65rem;
  font-size: 0.88rem;
  background: #fafbfc;
}

.ui-mmqr {
  width: min(100%, 22rem);
}

.ui-mmqr-brand {
  background: #1e5a8e;
  color: #fff;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.7rem 0.8rem;
}

.ui-mmqr-qr {
  position: relative;
  width: 10.5rem;
  height: 10.5rem;
  margin: 1rem auto 0;
  padding: 0.55rem;
  border-radius: 12px;
  border: 1px solid #d1d6de;
  background: #fff;
}

.ui-mmqr-qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ui-mmqr-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2rem;
  height: 2rem;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #fff;
  padding: 2px;
}

.ui-mmqr-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ui-pay-row {
  display: flex;
  justify-content: center;
  gap: 1.1rem;
  padding: 0.95rem 0 1.1rem;
}

.ui-pay-row img {
  width: 1.85rem;
  height: 1.85rem;
  object-fit: contain;
}

.ui-event-cover {
  height: 7.2rem;
  background: #0a2f6e;
  position: relative;
  overflow: hidden;
}

.ui-event-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ui-event-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.ui-btn {
  border-radius: 999px;
  background: #0b57d0;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 650;
  padding: 0.38rem 0.85rem;
}

.ui-sponsors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.85rem;
}

.ui-sponsor {
  display: grid;
  place-items: center;
  min-height: 3.4rem;
  border-radius: 12px;
  border: 1px dashed #c9d0d8;
  background: #f7f8fa;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5a6573;
}

.ui-member {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  border: 1px solid #d1d6de;
  background: #fff;
}

.ui-avatar {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: #e5eefc;
  color: #0a2f6e;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.78rem;
  flex-shrink: 0;
}

.ui-member img {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
  border-radius: 999px;
  flex-shrink: 0;
}

.ui-member small {
  color: #5a6573;
  font-size: 0.75rem;
}

.ui-article p {
  margin-top: 0.55rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #3a4450;
}

.phone {
  width: min(100%, 18.5rem);
  border-radius: 28px;
  border: 3px solid #1d1d1f;
  background: #1d1d1f;
  padding: 0.55rem 0.45rem 0.7rem;
  box-shadow: 0 22px 48px rgb(0 0 0 / 0.28);
}

.phone-bar {
  width: 4.2rem;
  height: 0.35rem;
  border-radius: 999px;
  background: #3a3a3c;
  margin: 0.15rem auto 0.55rem;
}

.phone .digital-id {
  max-width: none;
  box-shadow: none;
}

.phone .digital-id-qr img {
  width: 8.5rem;
  height: 8.5rem;
}

.vis-split .digital-id-qr img {
  width: 7.5rem;
  height: 7.5rem;
}

.code-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  width: min(100%, 72rem);
}

.code-tile {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  padding: 1rem 1rem 1.1rem;
  min-height: 11.5rem;
}

.slide.theme-light .code-tile {
  border-color: #d1d6de;
  background: #fff;
}

.code-tile .num {
  margin-bottom: 0.55rem;
}

.code-tile h3 {
  font-size: 1.05rem;
  margin-bottom: 0.55rem;
}

.code-tile p {
  margin-top: 0.45rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--mute);
}

.code-tile .mini {
  width: 5.6rem;
  height: 5.6rem;
  margin: 0.55rem auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.code-tile .mini img {
  height: 4.2rem;
  width: 4.2rem;
  object-fit: contain;
}

.code-tile.is-wave .mini {
  display: flex;
  width: fit-content;
  max-width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  margin-inline: auto;
  padding: 0.65rem 0.7rem;
  overflow: visible;
}

.code-tile.is-wave .mini .wave-plate {
  --wave-mark: 48px;
  width: fit-content;
  max-width: 100%;
  height: auto;
  min-height: 4.4rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid #e2e6ed;
}

.code-tile.is-wave .mini .wave-plate-row {
  width: fit-content;
  max-width: 100%;
}

.code-tile.is-wave .mini .wave-mark {
  width: var(--wave-mark);
  height: var(--wave-mark);
}

.code-tile.is-wave .mini .wave-strip,
.code-tile.is-wave .mini .wave-strip svg {
  flex: 0 1 var(--wave-strip-w);
  width: var(--wave-strip-w);
  height: var(--wave-mark);
}

.code-tile .mini .mecard-mini {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 12px;
}

.code-tile>.wave-caption {
  margin-top: 0.5rem;
  font-size: 0.68rem;
}

/* Slide 36: QR tiles force .mini img to 4.2rem, which crops the Wave mark. */
.codes-slide .code-tile.is-wave .mini {
  width: fit-content;
  max-width: 100%;
  overflow: visible;
  background: transparent;
  padding: 0.15rem 0;
}

.codes-slide .code-tile.is-wave .mini .wave-plate {
  --wave-mark: 56px;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  padding: 0.75rem 0.85rem;
}

.codes-slide .code-tile.is-wave .mini .wave-mark {
  overflow: hidden;
  border-radius: 999px;
  background: #fff;
  box-shadow: none;
}

.codes-slide .code-tile.is-wave .mini .wave-mark img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  object-position: center;
  transform: none;
}

/* Product-faithful apply wizard, status card, directory, inbox, chapter. */
.app-apply {
  width: min(100%, 30rem);
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #d1d6de;
  background: #f5f7fa;
  color: #141820;
  box-shadow: 0 4px 16px rgb(26 31 46 / 0.06);
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  transform: scale(0.88);
  transform-origin: center center;
}

.app-apply-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: 3.4rem;
  padding: 0 0.85rem 0 0.9rem;
  background: #fff;
  border-bottom: 1px solid #d1d6de;
}

.app-apply-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.app-apply-brand img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 999px;
}

.app-apply-brand strong {
  display: block;
  font-family: Fraunces, Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  color: #141820;
}

.app-apply-brand small {
  display: block;
  margin-top: 0.08rem;
  font-size: 12px;
  color: #5a6573;
}

.app-apply-body {
  padding: 0.85rem 0.85rem 1rem;
}

.app-step-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 13px;
  font-weight: 600;
  color: #5a6573;
}

.app-progress {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.35rem;
  margin-top: 0.7rem;
}

.app-progress i {
  height: 6px;
  border-radius: 999px;
  background: #c7ccd6;
}

.app-progress i.is-on {
  background: #0b57d0;
}

.app-card {
  margin-top: 0.85rem;
  padding: 1.15rem 1.15rem 1.05rem;
  border-radius: 16px;
  border: 1px solid #d1d6de;
  background: #fff;
  box-shadow: 0 4px 16px rgb(26 31 46 / 0.06);
}

.app-display {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #141820;
}

.app-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin: 1rem 0 0.35rem;
}

.app-photo-circle {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #e5eefc;
  color: #0b57d0;
  display: grid;
  place-items: center;
}

.app-photo-circle svg {
  display: block;
}

.app-photo span {
  font-size: 13px;
  font-weight: 600;
  color: #0b57d0;
}

.app-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 0.7rem;
  margin-top: 0.85rem;
}

.app-field {
  min-width: 0;
}

.app-field.is-wide {
  grid-column: 1 / -1;
}

.app-field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 13px;
  font-weight: 600;
  color: #141820;
}

.app-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  min-height: 2.65rem;
  padding: 0 0.85rem;
  border-radius: 12px;
  border: 1px solid #d1d6de;
  background: #f8fafd;
  font-size: 0.88rem;
  color: #141820;
  line-height: 1.3;
}

.app-input svg {
  flex-shrink: 0;
  color: #5a6573;
}

.app-nrc {
  display: flex;
  gap: 0.5rem;
}

.app-nrc .app-input.is-type {
  width: 4.6rem;
  flex-shrink: 0;
  justify-content: center;
  font-weight: 600;
  padding: 0 0.5rem;
}

.app-nrc .app-input.is-digits {
  flex: 1;
  font-variant-numeric: tabular-nums;
}

.app-nrc-preview {
  margin-top: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  background: #e5eefc;
  font-size: 14px;
  font-weight: 500;
  color: #141820;
}

.app-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.15rem;
}

.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 0.5rem 0.95rem;
  line-height: 1.2;
}

.app-btn.is-secondary {
  border: 1px solid #d1d6de;
  background: #fff;
  color: #141820;
}

.app-btn.is-primary {
  background: #0b57d0;
  color: #fff;
  padding: 0.5rem 1.15rem;
}

.app-apply-bar .app-btn {
  flex-shrink: 0;
}

.msc {
  width: min(100%, 24rem);
  border-radius: 20px;
  background: #0b57d0;
  color: #fff;
  padding: 1.2rem 1.25rem 1.25rem;
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

.msc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.msc-top p {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgb(255 255 255 / 0.75);
}

.msc-top span {
  flex-shrink: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.2);
  padding: 0.22rem 0.75rem;
  font-size: 12px;
  font-weight: 600;
}

.msc h3 {
  margin-top: 0.7rem;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.msc-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.1rem;
}

.msc-meta small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgb(255 255 255 / 0.7);
}

.msc-meta strong {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.msc .app-btn.is-light {
  margin-top: 1.1rem;
  background: #fff;
  color: #0a2f6e;
}

.dir-card,
.inbox-card,
.branch-card {
  width: min(100%, 26rem);
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #d1d6de;
  background: #fff;
  color: #141820;
  box-shadow: 0 4px 16px rgb(26 31 46 / 0.06);
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

.dir-search {
  margin: 0.85rem 0.9rem 0.55rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  padding: 0 0.95rem;
  border-radius: 12px;
  border: 1px solid #d1d6de;
  background: #f8fafd;
  font-size: 0.88rem;
  color: #5a6573;
}

.dir-kicker {
  margin: 0.15rem 1rem 0.4rem;
  font-size: 13px;
  font-weight: 600;
  color: #5a6573;
}

.dir-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid #d1d6de;
}

.dir-row strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}

.dir-row small {
  display: block;
  margin-top: 0.12rem;
  font-size: 13px;
  color: #5a6573;
  line-height: 1.35;
}

.inbox-card {
  padding: 0.15rem 0;
}

.inbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
}

.inbox-row+.inbox-row {
  border-top: 1px solid #d1d6de;
}

.inbox-row.is-unread {
  background: rgb(229 238 252 / 0.4);
}

.inbox-dot {
  width: 6px;
  height: 6px;
  margin-top: 0.55rem;
  border-radius: 999px;
  background: #0b57d0;
  flex-shrink: 0;
}

.inbox-row strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}

.inbox-row p {
  margin-top: 0.2rem;
  font-size: 13px;
  line-height: 1.4;
  color: #5a6573;
}

.inbox-row small {
  display: block;
  margin-top: 0.3rem;
  font-size: 11px;
  color: #5a6573;
}

.branch-card {
  padding: 1.1rem 1.15rem 1.15rem;
}

.branch-card .ui-kicker {
  color: #0b57d0;
  letter-spacing: 0.08em;
}

.branch-card h3 {
  margin-top: 0.35rem;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
}

.branch-card .ui-muted {
  margin-top: 0.65rem;
  line-height: 1.45;
}

.desk-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  width: min(100%, 64rem);
  margin-top: 2rem;
}

.desk-tile .num {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.7rem;
}

.desk-tile {
  padding: 1.1rem 1.15rem 1.2rem;
  border-radius: 16px;
  border: 1px solid #d1d6de;
  background: #fff;
  box-shadow: 0 4px 16px rgb(26 31 46 / 0.06);
}

.desk-tile h3 {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

.desk-tile p {
  margin-top: 0.45rem;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #5a6573;
  max-width: none;
}

.desk-footnote {
  margin-top: 1.15rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--mute);
  max-width: 46ch;
}

@media (max-width: 768px) {
  .desk-row {
    grid-template-columns: 1fr;
  }
}

.event-card {
  width: min(100%, 22rem);
}

.event-card .ui-event-cover {
  height: 8.6rem;
}

.event-chip {
  display: inline-block;
  margin-bottom: 0.4rem;
  border-radius: 6px;
  border: 1px solid #d1d6de;
  padding: 0.12rem 0.5rem;
  font-size: 11px;
  font-weight: 500;
  color: #5a6573;
}

.event-meta-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.45rem;
  font-size: 13px;
  color: #5a6573;
  line-height: 1.35;
}

.event-meta-line svg {
  flex-shrink: 0;
}

.digital-id.is-compact {
  max-width: 100%;
}

.digital-id.is-compact .digital-id-head {
  padding: 0.75rem 1rem;
}

.digital-id.is-compact .digital-id-head .brand {
  font-size: 1.1rem;
}

.digital-id.is-compact .digital-id-body {
  padding: 0.85rem 1rem 1rem;
}

.digital-id.is-compact .digital-id-photo {
  width: 2.7rem;
  height: 2.7rem;
  font-size: 1rem;
}

.digital-id.is-compact .digital-id-body .name {
  margin-top: 0.45rem;
  font-size: 1.1rem;
}

.digital-id.is-compact .digital-id-qr,
.digital-id.is-compact .digital-id-hint {
  display: none;
}

.digital-id.is-compact.show-qr .digital-id-qr {
  display: inline-flex;
  margin-top: 0.55rem;
  padding: 0.45rem;
}

.digital-id.is-compact.show-qr .digital-id-qr img {
  width: 4.4rem;
  height: 4.4rem;
}

.ui-mmqr.is-compact {
  width: 100%;
}

.ui-mmqr.is-compact .ui-mmqr-qr {
  width: 6.4rem;
  height: 6.4rem;
  margin-top: 0.7rem;
}

.ui-mmqr.is-compact .ui-pay-row {
  margin: 0.7rem 0 0.85rem;
  gap: 0.85rem;
}

.wave-code.is-compact .wave-plate {
  --wave-mark: 48px;
  padding: 0.7rem 0.75rem;
}

.wave-code.is-compact .wave-caption {
  margin-top: 0.5rem;
  font-size: 12px;
}

.product-fit {
  width: min(100%, 22rem);
  display: grid;
  gap: 0.7rem;
}

.product-fit.is-split {
  width: min(100%, 34rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

.product-fit.is-split .digital-id {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-fit.is-split .digital-id-body {
  flex: 1;
}

.product-fit.is-split .wave-code {
  grid-column: 1 / -1;
  margin-top: 0;
  justify-self: center;
  width: fit-content;
  max-width: 100%;
}

.product-fit.is-split .wave-plate {
  width: fit-content;
  max-width: 100%;
}

.ui-sponsor {
  border-style: solid;
  background: #fff;
}

.event-page,
.article-card,
.page-hero,
.compare {
  width: min(100%, 28rem);
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #d1d6de;
  background: #fff;
  color: #141820;
  box-shadow: 0 4px 16px rgb(26 31 46 / 0.06);
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

.event-page-head {
  display: flex;
  gap: 0.85rem;
  padding: 0.9rem 1rem 0.85rem;
  align-items: center;
}

.event-page-head img {
  width: 5.4rem;
  height: 3.4rem;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.event-page-head h3 {
  margin-top: 0.25rem;
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.3;
}

.event-sponsors {
  padding: 1rem 1.05rem 1.1rem;
  border-top: 1px solid #e2e6ed;
}

.event-sponsors h3 {
  margin: 0 0 0.75rem;
  font-size: 16px;
  font-weight: 650;
}

.event-sponsors-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.2rem;
}

.event-sponsors-row img {
  height: 48px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.8;
}

.compare {
  display: grid;
  gap: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.compare-card {
  padding: 1.05rem 1.1rem 1.15rem;
  border: 1px solid #d1d6de;
  background: #fff;
}

.compare-card:first-child {
  border-radius: 16px 16px 0 0;
  background: #f7f8fa;
}

.compare-card:last-child {
  border-radius: 0 0 16px 16px;
  border-top: 0;
}

.compare-card h3 {
  margin-top: 0.35rem;
  font-size: 1.12rem;
  font-weight: 650;
  line-height: 1.3;
}

.compare-card p {
  margin-top: 0.4rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #5a6573;
}

.compare-card.is-off .ui-kicker {
  color: #8a3340;
}

.article-card img {
  display: block;
  width: 100%;
  height: 8.4rem;
  object-fit: cover;
}

.article-card-body {
  padding: 1rem 1.05rem 1.15rem;
}

.article-card-body .app-display {
  margin-top: 0.35rem;
  font-size: 1.35rem;
}

.article-card-body p {
  margin-top: 0.55rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #3a4450;
}

.article-card-body .app-btn {
  margin-top: 0.9rem;
}

.page-hero {
  padding: 1.35rem 1.25rem 1.4rem;
  background: #f5f7fa;
}

.page-hero .ui-kicker {
  color: #5a6573;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 13px;
  font-weight: 500;
}

.page-hero .app-display {
  margin-top: 0.7rem;
  font-size: 2rem;
}

.page-hero p {
  margin-top: 0.7rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #5a6573;
  max-width: 32ch;
}

.page-hero-links {
  display: flex;
  gap: 0.7rem;
  margin-top: 1rem;
  font-size: 13px;
  font-weight: 600;
  color: #0b57d0;
}

.store-card {
  width: min(100%, 26rem);
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: 16px;
  border: 1px solid #d1d6de;
  background: #fff;
  color: #141820;
  box-shadow: 0 4px 16px rgb(26 31 46 / 0.06);
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

.store-card .app-display {
  font-size: 1.35rem;
}

.store-card p {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #5a6573;
}

.store-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1rem;
}

.store-row img {
  height: 40px;
  width: auto;
}

.mecard-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  min-height: 4.6rem;
  width: 100%;
  padding: 0.55rem 0.4rem;
  border-radius: 10px;
  background: #fff;
  color: #141820;
}

.mecard-mini strong {
  font-size: 0.78rem;
  font-weight: 650;
}

.mecard-mini span {
  font-size: 0.62rem;
  color: #5a6573;
}

.mecard-mini small {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a6573;
}

.slide:not(.theme-light) .wave-caption {
  color: rgba(245, 245, 247, 0.88);
}

.codes-slide h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  max-width: 18ch;
}

.codes-slide .lede {
  margin-top: 0.85rem;
  margin-bottom: 1.35rem;
  max-width: 46ch;
}

.msc.is-muted {
  background: #fff;
  color: #141820;
  border: 1px solid #d1d6de;
}

.msc.is-muted .msc-top p,
.msc.is-muted .msc-body {
  color: #5a6573;
}

.msc.is-muted .msc-top span {
  background: #e8f0fe;
  color: #0b57d0;
}

.msc.is-muted h3 {
  color: #141820;
}

.msc-body {
  margin-top: 0.45rem;
  font-size: 0.88rem;
  line-height: 1.4;
  color: rgb(255 255 255 / 0.9);
}

.status-stack {
  display: grid;
  gap: 0.75rem;
  width: min(100%, 24rem);
}

.id-share {
  width: min(100%, 26rem);
  padding: 1.2rem 1.25rem 1.3rem;
  border-radius: 16px;
  background: #fff;
  color: #141820;
  box-shadow: 0 4px 16px rgb(26 31 46 / 0.12);
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

.id-share-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  border: 1px solid #d1d6de;
  background: #f7f8fa;
  font-size: 0.88rem;
  font-weight: 600;
}

.id-share-row small {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a6573;
  font-weight: 600;
}

.id-share-id {
  margin: 0.95rem 0 0.35rem;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 650;
  letter-spacing: -0.04em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.id-share-note {
  margin-bottom: 0.95rem;
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.4;
  color: #5a6573;
}

.qa-steps {
  width: min(100%, 26rem);
  padding: 1.1rem 1.15rem 1.2rem;
  border-radius: 16px;
  border: 1px solid #d1d6de;
  background: #fff;
  color: #141820;
  box-shadow: 0 4px 16px rgb(26 31 46 / 0.06);
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

.qa-steps ol {
  list-style: none;
  margin-top: 0.85rem;
  display: grid;
  gap: 0.45rem;
}

.qa-steps li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  background: #f5f7fa;
  font-size: 0.92rem;
  font-weight: 600;
}

.qa-steps li span {
  flex-shrink: 0;
  width: 1.85rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #0b57d0;
}

.listing-card {
  display: flex;
  gap: 1rem;
  width: min(100%, 28rem);
  padding: 1.15rem 1.2rem;
  border-radius: 16px;
  border: 1px solid #d1d6de;
  background: #fff;
  color: #141820;
  box-shadow: 0 4px 16px rgb(26 31 46 / 0.06);
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

.listing-icon {
  flex-shrink: 0;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 12px;
  background: #1a73e8;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  font-weight: 700;
}

.listing-card .app-display {
  margin-top: 0.2rem;
  font-size: 1.15rem;
}

.listing-card p {
  margin-top: 0.4rem;
  font-size: 0.86rem;
  line-height: 1.4;
  color: #5a6573;
}

.listing-warn {
  display: inline-block;
  margin-top: 0.7rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a3340;
}

.desk {
  width: min(100%, 28rem);
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #d1d6de;
  background: #fff;
  color: #141820;
  box-shadow: 0 4px 16px rgb(26 31 46 / 0.06);
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

.desk-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.95rem 1.05rem 0.85rem;
}

.desk-bar h3 {
  margin-top: 0.2rem;
  font-size: 1.15rem;
  font-weight: 650;
}

.desk-count {
  flex-shrink: 0;
  border-radius: 999px;
  background: #e6f4ea;
  color: #137333;
  padding: 0.28rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 650;
}

.desk-scan {
  position: relative;
  height: 9.5rem;
  margin: 0 0.9rem;
  border-radius: 12px;
  background: #0a0c10;
  overflow: hidden;
}

.desk-scan span {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 46%;
  height: 2px;
  background: #34a853;
  box-shadow: 0 0 12px #34a853;
}

.desk-flash {
  margin: 0.85rem 0.9rem 1rem;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  border: 1px solid #e2e6ed;
  background: #f7f8fa;
}

.desk-flash strong {
  font-size: 0.98rem;
}

.desk-flash .ui-muted {
  margin-top: 0.2rem;
}

.desk-undo {
  display: inline-block;
  margin-top: 0.45rem;
  font-size: 0.78rem;
  font-weight: 650;
  color: #0b57d0;
}

@media (max-width: 768px) {

  .vis-split,
  .wave-stage,
  .plate-row,
  .code-tiles,
  .ui-sponsors {
    grid-template-columns: 1fr;
  }
}