@font-face {
  font-family: Roboto;
  src: url("../fonts/roboto-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --gold: #d4a11e;
  --gold-deep: #ac7d10;
  --gold-light: #ffe89a;
  --blue: #174c91;
  --ink: #183b69;
  --button-hover-shadow: 0 2px 0 #d9bd70, 0 3px 6px #b2943c14;
}

* { box-sizing: border-box; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  color: var(--ink);
  font-family: Roboto, Arial, sans-serif;
  background:
    radial-gradient(ellipse at 79% 38%, #e8f3ff80, transparent 46%),
    radial-gradient(ellipse at 18% 49%, #fff4ce90, transparent 45%),
    linear-gradient(110deg, #fff 22%, #fffefb 52%, #fff 78%);
  background-attachment: fixed;
}
body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body::before {
  background:
    linear-gradient(107deg, #f6dfa51a 7%, #e9c55f24 7.1%, #fff 7.3%, transparent 19%),
    linear-gradient(253deg, #f6dfa51a 7%, #e9c55f24 7.1%, #fff 7.3%, transparent 19%);
}
body::after { background: linear-gradient(0deg, #f7e8b63b, transparent 28%); }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; width: 24px; height: 24px; flex-shrink: 0; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.svg-symbols { display: none; }

.page { width: min(100%, 1220px); margin-inline: auto; padding: 22px 24px 16px; }
/* Compensate for the FB188 asset's transparent side margins. */
.masthead-logo { display: block; width: 528px; max-width: 66%; margin: 0 auto; }
.masthead-logo img { filter: drop-shadow(0 1px 1px #465d7133); }
.content { width: 96%; margin: 11px auto 0; }
.promo { display: flex; align-items: center; justify-content: center; gap: 30px; }
.promo-apps { width: 36%; max-width: 385px; padding-top: 5px; }
.referral-art { width: 100%; }
.promo-visual { position: relative; width: 54%; max-width: 590px; }
.promo-art { display: block; width: 100%; }
.promo-art img { width: 100%; }
.app-cards { width: 92%; margin: 12px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: end; }
.qr-card { width: 100%; }
.qr-image { width: 100%; }
.app-download {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  margin-top: 8px;
  padding: 10px 11px;
  border-radius: 10px;
  border: 1px solid #e3c46d;
  background: linear-gradient(125deg, #fff 18%, #fff9e5 74%, #fae6a4);
  box-shadow: none;
  transition: transform 160ms, box-shadow 160ms;
}
.app-download > svg { width: 22px; height: 25px; color: var(--blue); }
.app-download small { display: block; font-size: 9px; line-height: 1.5; font-weight: 600; color: #5c7392; }
.app-download strong { display: block; font-size: 14px; line-height: 1.4; }
.button-arrow { display: grid; place-items: center; flex-shrink: 0; margin-left: auto; color: var(--blue); width: 28px; height: 28px; border-radius: 50%; border: 1px solid #e5cb7d; background: #fff; }
.button-arrow svg { width: 22px; height: 22px; }
.app-download:hover,
.app-download:focus-visible { transform: translateY(-3px); }

.links { text-align: center; margin-top: 10px; }
.heading-line { display: flex; align-items: center; justify-content: center; gap: 11px; margin: 0 auto 8px; color: #d6ac40; font-size: 8px; }
.heading-line::before, .heading-line::after { content: ""; width: 90px; height: 1px; background: linear-gradient(90deg, transparent, #e1c572); }
.heading-line::after { transform: rotate(180deg); }
h1 { margin: 0; font-size: clamp(23px, 2.65vw, 36px); line-height: 1.3; font-weight: 900; color: #c5961c; text-shadow: 0 1px 0 #fff, 0 2px 1px #d3a63524; }
.link-grid { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; width: 100%; padding: 0; margin: 24px auto 0; }
.link-card { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.link-meter {
  position: relative;
  display: grid;
  place-items: center;
  width: 122px;
  max-width: 90%;
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 50%;
}
.meter-face {
  position: absolute;
  inset: -1px;
  border: 1px solid #e6ca74;
  border-radius: 50%;
  background: linear-gradient(140deg, #fff 20%, #fff4cc 49%, #fff 78%);
  box-shadow: 0 4px 12px #bf9e3610, inset 0 0 0 3px #fff;
  transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.meter-face::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: repeating-conic-gradient(from -1deg, #c9a337 0 1deg, transparent 1deg 6deg);
  mask: radial-gradient(circle, transparent 60%, #000 61%);
}
.meter-face::after { content: ""; position: absolute; inset: 20px; border: 1px solid #dcc268; border-radius: 50%; box-shadow: inset 0 0 0 3px #fff; }
.meter-fill { position: absolute; top: 50%; left: 50%; width: 66%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 40% 30%, #fff, #f8fbff); }
.meter-inner { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; width: 66%; aspect-ratio: 1; border-radius: 50%; color: var(--blue); }
.meter-value { font-size: clamp(13px, 1.667vw, 24px); font-weight: 800; font-variant-numeric: tabular-nums; }
.meter-unit { font-size: clamp(13px, 1.667vw, 24px); font-weight: 800; }
.link-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid #dcb74d;
  background: linear-gradient(115deg, #f2d98f, #fff2c2 48%, #edcb72);
  box-shadow: none;
  font-size: clamp(13px, 1.4vw, 18px);
  font-weight: 800;
  color: var(--ink);
  transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.link-button > span { font-size: 19px; }
.link-meter:hover .meter-face,
.link-meter:focus-visible .meter-face { transform: scale(1.04); }
.link-button:hover,
.link-button:focus-visible { transform: translateY(-2px); }
.support { display: none; position: absolute; right: -6%; top: 25%; width: 13vw; aspect-ratio: 217 / 219; z-index: 3; flex-direction: column; justify-content: center; align-items: center; gap: 3%; padding: 0; border: 1px solid #d9b34f; border-radius: 50%; background: #fffdf4; color: var(--blue); box-shadow: none; transition: transform 160ms, box-shadow 160ms; }
.support > svg { width: 58%; height: auto; aspect-ratio: 1; }
.support > span { color: #ac7d10; font-size: 2.2vw; font-weight: 900; line-height: 1; }
.support:hover,
.support:focus-visible { transform: translateY(-2px); }
.app-download:hover,
.app-download:focus-visible,
.link-button:hover,
.link-button:focus-visible,
.support:hover,
.support:focus-visible { box-shadow: var(--button-hover-shadow); }

/* Restore the original composition; reserve XX88's height without stretching images. */
@media (min-width: 769px) {
  /* XX88's height varies linearly with its shell width, capped at 1320px. */
  .page { container-type: inline-size; display: flex; flex-direction: column; width: min(100%, 1320px); min-height: calc(min(64.39617vw, 850.02944px) + 49.18931px); padding: 0 12px 16px; }
  .masthead { padding-top: 1.697531cqw; }
  .masthead-logo { width: 40.740741cqw; }
  .content { display: flex; flex-direction: column; flex: 1; width: 86.814815cqw; margin-top: .848765cqw; }
  .promo { flex-shrink: 0; gap: 2.314815cqw; }
  .promo-apps { width: 29.706790cqw; max-width: none; padding-top: .385802cqw; }
  .promo-visual { width: 45.524691cqw; max-width: none; }
  .app-cards { margin-top: .925926cqw; gap: 1.697531cqw; }
  .app-download { min-height: 4.475309cqw; margin-top: .617284cqw; padding: .771605cqw .848765cqw; gap: .617284cqw; }
  .app-download > svg { width: 1.697531cqw; height: 1.929012cqw; }
  .app-download small { font-size: .694444cqw; }
  .app-download strong { font-size: 1.080247cqw; }
  .button-arrow { width: 2.160494cqw; height: 2.160494cqw; }
  .button-arrow svg { width: 1.697531cqw; height: 1.697531cqw; }
  .links { margin-top: auto; }
  h1 { font-size: 2.777778cqw; }
  /* Keep the accepted route row, including its visible 14.5px meter/button gap. */
  .link-grid { position: relative; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; width: 91.6667cqw; padding-inline: 16px; margin-top: 8px; }
  .link-card { width: 16.6667%; padding-inline: 16px; gap: 0; }
  .link-meter { container-type: inline-size; width: 83.3333%; max-width: none; aspect-ratio: 512 / 513; border: 0; }
  /* Scale the complete dial from its 133.875px reference slot, like XX88's image. */
  .meter-face { inset: auto; top: 4.678363%; left: 4.6875%; width: 90.625%; aspect-ratio: 1; border-width: .746965cqw; box-shadow: 0 2.987862cqw 8.963585cqw #bf9e3610, inset 0 0 0 2.240896cqw #fff; }
  .meter-face::before { inset: 4.481793cqw; }
  .meter-face::after { inset: 14.939309cqw; border-width: .746965cqw; box-shadow: inset 0 0 0 2.240896cqw #fff; }
  .meter-inner { gap: 2.987862cqw; }
  .link-button { min-height: 0; aspect-ratio: 512 / 143; margin-top: 8px; font-size: clamp(11px, 1.389vw, 20px); gap: clamp(4px, .7vw, 10px); font-weight: 700; }
  .link-button > span { font-size: clamp(11px, 1.389vw, 20px); }
}
@media (max-width: 768px) {
  body { background-attachment: scroll; }
  .page { padding: 16px 16px 24px; }
  .masthead-logo { width: 340px; max-width: 84%; }
  .content { width: 100%; margin-top: 13px; }
  .promo { flex-direction: column; gap: 0; }
  .promo-visual { order: -1; width: 95%; max-width: 410px; }
  .promo-apps { width: 92%; max-width: 370px; padding: 0; margin-top: -10px; position: relative; }
  .referral-art { width: 94%; margin-inline: auto; }
  .app-cards { width: 96%; margin-top: 10px; gap: 15px; }
  .qr-card { display: none; }
  .app-download { margin-top: 0; min-height: 55px; padding: 8px 11px; gap: 8px; }
  .app-download small { font-size: 8px; }
  .app-download strong { font-size: 13px; }
  .app-download > svg { width: 22px; }
  .links { margin-top: 23px; }
  .heading-line { margin-bottom: 9px; }
  .heading-line::before, .heading-line::after { width: 65px; }
  h1 { font-size: clamp(18px, 5.5vw, 30px); white-space: nowrap; }
  .link-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; max-width: 440px; margin-top: 18px; }
  .link-card { gap: 4px; }
  .link-meter { width: 87px; }
  .meter-face::before { inset: 4px; }
  .meter-face::after { inset: 10px; }
  .meter-inner, .meter-fill { width: 72%; }
  .meter-value { font-size: 21px; }
  .meter-unit { font-size: 10px; }
  .link-button { min-height: 35px; font-size: 13px; gap: 10px; border-radius: 7px; }
  .link-button > span { font-size: 15px; }
  .support { display: flex; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }