:root {
  color-scheme: dark;
  --display: "Songti SC", "Noto Serif SC", "STSong", serif;
  --body: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --wine: #35000e;
  --gold: #ffe29b;
  --pink: #ff6a9e;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: #220008; scroll-padding-top: 1.2rem; }
body { margin: 0; color: #fff3e7; background: #220008; font-family: var(--body); }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid #ffe579; outline-offset: 3px; }
.skip-link {
  position: absolute; top: 0; left: 0; z-index: 5; transform: translateY(-120%);
  padding: .6rem 1rem; color: #270007; background: #ffe49c;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: relative;
  padding: clamp(1.25rem, 5.65vw, 7.4rem) max(4.25%, env(safe-area-inset-right)) .42%;
  background: #28030d url('/assets/shared/header-ribbon.webp') top center / 100% auto no-repeat;
  box-shadow: inset 0 -1px #ff5c8b;
}
.masthead { display: flex; gap: clamp(.55rem, 2.5vw, 3rem); align-items: center; justify-content: space-between; }
.site-brand { display: inline-flex; align-items: center; flex: none; gap: .36em; color: var(--gold); text-decoration: none; }
.site-brand img { width: clamp(32px, 5.55vw, 108px); height: auto; }
.site-brand b, .site-brand small { display: block; white-space: nowrap; }
.site-brand b { font-family: var(--display); line-height: 1.05; font-size: clamp(1.25rem, 2.6vw, 3.15rem); }
.site-brand small { font-size: clamp(.58rem, 1.08vw, 1.35rem); font-weight: 700; line-height: 1.32; }
.masthead > .site-brand { border-right: 1px solid #b0823f; padding-right: clamp(.45rem, 2.75vw, 3.25rem); }
.masthead nav { display: flex; justify-content: space-between; align-items: center; flex: 1; gap: .2em; }
.masthead nav a {
  padding: .28em .4em; border-radius: 999px; color: #fff6ed; text-decoration: none; white-space: nowrap;
  font-size: clamp(.81rem, 1.65vw, 2.03rem); line-height: 1.2; font-weight: 750;
}
.masthead nav a[aria-current="page"] {
  padding-inline: .85em;
  background: linear-gradient(#ff6c9d, #e6004b 36%, #97001e 74%, #f94270);
  box-shadow: 0 0 .35em #ff3d7c66, inset 0 1px #ffabc4, inset 0 -2px #ff9ab3;
}
.pink-button, .footer-download {
  display: inline-flex; align-items: center; justify-content: center; gap: .3em; flex: none;
  border: 1px solid #ff85a8; border-radius: 999px; text-decoration: none; text-align: center;
  background: linear-gradient(#ff90b3, #fb195a 29%, #bc0031 69%, #f44075);
  color: #fff; box-shadow: inset 0 0 .3em #ffd5e2, 0 0 .28em #ff376c8a;
  font-weight: 750; line-height: 1.1;
}
.app-button { padding: .55em .8em; white-space: nowrap; font-size: clamp(.75rem, 1.3vw, 1.6rem); }

.site-footer { background: #2b0208; }
.footer-call {
  display: grid;
  grid-template-columns: 26.8% 1fr;
  min-height: 15vw;
  padding-bottom: clamp(2rem, 7.1vw, 8.3rem);
  align-items: start;
  background: url('/assets/shared/footer-wave.webp') center 88% / 100% auto no-repeat,
              radial-gradient(ellipse at 27% 0, #801c2f, transparent 44%),
              linear-gradient(0deg, #3b000b, #580014 16%, #39040d 56%, #4e0619);
  box-shadow: inset 0 2px #ff5c8b;
}
.footer-call > img { width: 100%; height: auto; mask-image: linear-gradient(to right,#000 92%,transparent),linear-gradient(to bottom,#000 90%,transparent); mask-composite: intersect; }
.footer-pitch { display: grid; grid-template-columns: 1.1fr 1fr; gap: .45em .3em; align-items: center; padding: 1.2vw 2vw .5vw 0; }
.footer-pitch h2 {
  margin: 0; text-align: center; color: #ffe067; font: italic 750 clamp(1.05rem,2.48vw,3rem)/1.19 var(--display);
  text-shadow: 0 .06em .1em #670e01, 0 0 .25em #090001;
}
.footer-consult { justify-self: center; padding: .55em .6em; font: 750 clamp(.92rem,2.4vw,2.9rem)/1.05 var(--display); }
.footer-consult span, .footer-bar span { color: #ffe471; }
.headset { width: 1.05em; height: 1.05em; color: #ffe471; flex: none; }
.footer-pitch ul {
  grid-column: 1/-1; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .25em .7em;
  list-style: none; margin: 0; padding: 0; color: #ffdf44; font-size: clamp(.84rem,1.72vw,2.05rem); font-weight: 800;
}
.footer-pitch li + li { border-left: 1px solid #d4a458; padding-left: .7em; }
.footer-pitch li::before { content: "✓"; margin-right: .28em; }
.footer-columns {
  display: grid; grid-template-columns: 1.5fr repeat(5, 1fr) .96fr;
  align-items: start; padding: 1.35% 2.55% 2%;
  border-top: 1px solid #b52643; border-bottom: 1px solid #a82738;
  font: 500 clamp(.8rem,1.5vw,1.85rem)/1.55 var(--display);
}
.footer-columns > section, .footer-app { min-width: 0; padding-inline: 12%; border-left: 1px solid #a82635; }
.footer-columns > .footer-brand { border: 0; padding: 0 7% 0 0; }
.footer-brand .site-brand img { width: clamp(30px,5.4vw,105px); }
.footer-brand .site-brand b { font-size: clamp(1.1rem,2.6vw,3rem); }
.footer-brand .site-brand small { font: 800 clamp(.6rem,1.15vw,1.4rem)/1.1 var(--body); }
.footer-brand p { margin: .45em 0 0; }
.footer-columns h3 { color: #ffd461; display: inline-block; border-bottom: 1px solid; font-size: 1.17em; margin: 0 0 .3em; }
.footer-columns section > :is(a:not(.site-brand),span) { display: block; padding: .01em .02em; text-decoration: none; }
.footer-columns section > span { color: #ecd0c7; }
.footer-app { display: grid; align-items: center; align-self: stretch; }
.footer-download { padding: .6em .38em; color: #260807; background: linear-gradient(#fff29c, #ffca00); border-color: #fff8bb; box-shadow: none; }
.footer-legal {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .3em .7em; padding: .5em .65em;
  font-size: clamp(.76rem,1.19vw,1.45rem);
}
.footer-legal small { font-size: inherit; }
.footer-legal > :not(small) { border-left: 1px solid #d8a981; padding-left: .7em; }
.footer-bar {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-radius: min(5vw, 60px) min(5vw, 60px) 0 0;
  background: linear-gradient(#ff84aa,#fb245a 24%,#b6002a 71%,#fe5283);
  box-shadow: inset 0 2px #ffb1c9, inset 0 -1px #ffb1c9; overflow: hidden;
}
.footer-bar > :is(a,button) {
  color: #ffe47a; display: flex; justify-content: center; align-items: center; gap: .25em;
  min-height: 44px; padding: .32em .3em; background: transparent; border: 0; text-align: center;
  text-decoration: none; font: 800 clamp(1rem,4.1vw,5rem)/1.15 var(--display); text-shadow: 0 .05em .075em #701000;
}
.footer-bar > :is(a,button) + a { border-left: 2px solid #ffe787; border-radius: 12% 0 0 0; }
.case-detail { min-height: 55vh; width: min(100%, 65rem); margin-inline: auto; padding: clamp(1.25rem,6vw,5rem) clamp(1rem,4vw,3rem); }
.case-detail nav, .case-back { color: #ffe4aa; }
.case-detail h1 { font-family: var(--display); font-size: clamp(1.75rem,4vw,3.9rem); line-height: 1.24; color: var(--gold); }
.case-detail p { line-height: 1.8; font-size: clamp(1rem,1.55vw,1.25rem); }
.case-status { padding: .85em 1em; background: #4d071c; border-left: 3px solid #ee7198; }
.case-back { display: inline-block; margin-top: 1.3em; }
#availability {
  width: min(28rem, calc(100vw - 2rem)); border: 1px solid var(--pink); border-radius: 1rem; padding: 1.5rem;
  background: #350817; color: #fff5e8; box-shadow: 0 0 2rem #e5006040;
}
#availability::backdrop { background: #110006cb; }
#availability h2 { color: var(--gold); margin: 0; }
#availability button { padding: .65em 1.2em; }

@media (max-width: 860px) {
  .site-header { padding: max(1.6rem,5.65vw) 3.4% .4rem; }
  .masthead { display: grid; grid-template-columns: 1fr auto; column-gap: .65rem; row-gap: .45rem; }
  .masthead > .site-brand { border: 0; }
  .masthead .app-button { justify-self: end; }
  .masthead nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; flex-wrap: wrap; gap: .12rem .26rem; }
  .masthead nav a { padding-block: .55em; font-size: clamp(.8rem,2.35vw,1.07rem); }
  .footer-call { padding-bottom: 8vw; }
  .footer-pitch { grid-template-columns: 1fr; gap: .55em; }
  .footer-pitch ul { justify-content: center; }
  .footer-columns { grid-template-columns: repeat(3,minmax(0,1fr)); row-gap: 1.1rem; padding: 1rem 4%; }
  .footer-columns > .footer-brand { grid-column: 1/-1; padding: 0; }
  .footer-app { justify-self: start; align-self: start; }
  .footer-bar > :is(a,button) { font-size: clamp(.95rem,3.5vw,1.8rem); }
}

@media (prefers-reduced-motion:no-preference) {
  .section-arrived { animation: arrive .55s ease-out both; }
  @keyframes arrive { from { transform: translateY(.4rem); } to { transform: translateY(0); } }
  @media (hover:hover) {
    .pink-button, .footer-download, .masthead nav a { transition: filter .2s, box-shadow .2s, background-color .2s; }
    .pink-button:hover, .footer-download:hover { filter: brightness(1.17); }
    .masthead nav a:hover { background-color: #a82453; }
    .footer-columns a:hover { color: #ffe487; text-decoration: underline; }
  }
}

.release-note {
  margin: 0;
  padding: .65rem 1rem;
  color: #ffe6aa;
  text-align: center;
  font: 600 clamp(.8rem, 1.2vw, 1.1rem)/1.4 var(--body);
  background: #410717;
  border-block: 1px solid #a92c51;
}