/*
  2.5D Printer price guess: the official site's drawing set.
  Sheets of drafting film, graphite linework, and one blue-violet ink that
  only ever appears as printed dots or as the action a visitor takes.
  Shared by index_EN.html and index_CN.html.
*/
@import url("fonts/fonts.css");

:root {
  --film: #f2f4f5;
  --film-deep: #e5eaeb;
  --paper: #fbfcfd;
  --white: #ffffff;
  --graphite: #1a1f21;
  --graphite-lift: #33393d;
  --graphite-2: #495458;
  --construction: #838d90;
  --rule: #c4cbce;
  --ink: #2e3bff;
  --ink-deep: #1f2ad8;
  --rednote: #ff2442;
  /* Flat colour fields, one lightness band (OKLCH 0.74 to 0.86); lettering on a field is always graphite */
  --lemon: #ebd22a;
  --coral: #fd7e85;
  --sky: #55bef0;
  --mint: #6ee2ad;
  --tangerine: #ffa153;
  --lilac: #b09ff4;
  --dot: 4px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 4rem;
  --font-body: "Barlow", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --font-label: "Barlow Semi Condensed", "Barlow", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color-scheme: light;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--film);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  scrollbar-color: var(--construction) var(--film);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--film);
  color: var(--graphite);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  caret-color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure {
  margin: 0;
}
ul, ol {
  padding: 0;
  list-style: none;
}
img, svg {
  display: block;
  max-width: 100%;
}
button, input, select {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
}
::selection {
  background: var(--ink);
  color: var(--white);
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: var(--film);
}
::-webkit-scrollbar-thumb {
  background: var(--construction);
  border: 3px solid var(--film);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--graphite);
  color: var(--film);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus {
  top: 0.5rem;
}

/* ---------- Lettering ---------- */
.h1 {
  font-weight: 600;
  font-size: clamp(2.6rem, 8.2vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.h2 {
  font-weight: 600;
  font-size: clamp(1.9rem, 4.2vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 48rem;
}
.lead {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: var(--graphite-2);
  max-width: 38rem;
}
.label {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite-2);
}
:lang(zh) .h1,
:lang(zh) .h2,
:lang(zh) .scene-text h3 {
  letter-spacing: 0;
}
:lang(zh) .label {
  letter-spacing: 0.04em;
}

/* Printed ink: a fixed dot screen, never a smooth fill */
.printed {
  color: var(--ink);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 calc(var(--dot) * 0.47), transparent calc(var(--dot) * 0.52));
  mask-image: radial-gradient(circle at 50% 50%, #000 0 calc(var(--dot) * 0.47), transparent calc(var(--dot) * 0.52));
  -webkit-mask-size: var(--dot) var(--dot);
  mask-size: var(--dot) var(--dot);
}

/* ---------- Sheet, frames, views ---------- */
.wrap {
  width: 100%;
  max-width: 84rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
.sheet {
  margin-top: 6rem;
}
.sheet-head {
  display: grid;
  gap: 1.5rem;
}
.sheet-body {
  margin-top: 2.5rem;
}
.frame {
  border: 1px solid var(--graphite);
  background: var(--film);
}
.view {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--graphite);
  overflow: hidden;
}
.view-cap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin-top: 0.75rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite-2);
}
.view-cap b {
  color: var(--graphite);
  font-weight: 600;
}
.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: currentColor;
}

/* ---------- Actions ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0 1.25rem;
  border: 1px solid var(--graphite);
  border-radius: 0;
  background: transparent;
  color: var(--graphite);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), transform 0.12s var(--ease-out);
}
.btn:hover {
  background: var(--graphite);
  color: var(--film);
}
.btn:active {
  transform: translateY(1px);
}
.btn--ink {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}
.btn--ink:hover {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
  color: var(--white);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--film-deep);
  border-color: var(--rule);
  color: var(--graphite-2);
  cursor: not-allowed;
  transform: none;
}
.btn--compact {
  min-height: 2.5rem;
  padding: 0 1rem;
  font-size: 0.9375rem;
}
.link {
  color: var(--graphite);
  text-decoration: underline;
  text-decoration-color: var(--construction);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.2s var(--ease-out), text-decoration-color 0.2s var(--ease-out);
}
.link:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

/* ---------- Header ---------- */
header.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--film);
  border-bottom: 1px solid var(--graphite);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--header-h);
}
.brand {
  display: block;
  flex: none;
}
.brand img {
  height: 2.5rem;
  width: auto;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lang-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 0.875rem;
  border: 1px solid var(--graphite);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out);
}
.lang-link:hover {
  background: var(--film-deep);
}
.nav-cta {
  gap: 0;
}
.nav-cta .cta-l2 {
  display: none;
}

/* ---------- Hero sheet ---------- */
.hero {
  margin-top: 1rem;
}
.hero-grid {
  display: grid;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  padding: 3rem 1.25rem 2.25rem;
  min-width: 0;
}
.hero-title {
  position: relative;
}
.print-line {
  display: block;
  width: fit-content;
}
/* The dot screen is a mask, and a mask stops at the element's box. Block-level printed lines get room
   below for descenders (y, p, g), taken back with a negative margin so the layout does not move. */
.print-line,
.price-title .printed {
  padding-bottom: 0.24em;
  margin-bottom: -0.24em;
}
.hero-sub {
  margin-top: 2.5rem;
}
.hero-meta {
  margin-top: 2rem;
  border-top: 1px solid var(--graphite);
  max-width: 38rem;
}
.hero-meta li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--graphite-2);
  font-size: 1.0625rem;
}
.hero-meta li:last-child {
  border-bottom-color: var(--graphite);
}
.hero-meta b {
  color: var(--graphite);
  font-weight: 600;
  min-width: 8.5rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.ref-banner {
  display: none;
  margin-top: 1.5rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--graphite);
  background: var(--paper);
  color: var(--graphite-2);
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 38rem;
}
.ref-banner.show {
  display: block;
}
.ref-banner b {
  color: var(--graphite);
  font-family: var(--font-label);
  letter-spacing: 0.06em;
}
.hero-view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.25rem;
  border-top: 1px solid var(--graphite);
  min-width: 0;
}
.hero-view .view {
  padding: 1.5rem 1.25rem 1.25rem;
}
.hero-drawing {
  width: 100%;
  height: auto;
}
.titleblock {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--graphite);
}
.titleblock > div {
  padding: 0.75rem 1rem;
  min-width: 0;
}
.titleblock > div + div {
  border-left: 1px solid var(--graphite);
}
.titleblock > div:nth-child(3) {
  grid-column: 1 / -1;
  border-left: 0;
  border-top: 1px solid var(--graphite);
}
.titleblock dd {
  margin-top: 0.25rem;
  font-weight: 500;
  line-height: 1.35;
}

/* The machine that prints the headline: a question mark on a block, because its form is still under wraps */
.print-cube {
  position: absolute;
  left: 0;
  top: 0;
  width: 3.4rem;
  height: 3.4rem;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}
.print-cube svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.js .hero-title[data-print="pending"] .print-line,
.js .hero-title[data-print="running"] .print-line {
  clip-path: inset(-25% 100% -25% 0);
}
.js .hero-title[data-print="pending"] .print-line[data-dir="rtl"],
.js .hero-title[data-print="running"] .print-line[data-dir="rtl"] {
  clip-path: inset(-25% 0 -25% 100%);
}
.hero-title[data-print="running"] .print-cube,
.hero-title[data-print="done"] .print-cube.is-parked {
  opacity: 1;
}

/* View A: millimetre-style drawing, strokes stay 1px-ish at any size */
.dw-body {
  fill: var(--paper);
  stroke: var(--graphite);
  stroke-width: 1.4px;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
.dw-thin {
  fill: none;
  stroke: var(--graphite);
  stroke-width: 0.9px;
  vector-effect: non-scaling-stroke;
}
.dw-mark {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 44px;
}
.dw-label {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 6.2px;
  letter-spacing: 0.6px;
  fill: var(--graphite-2);
}
.print-cube svg {
  filter: drop-shadow(0 5px 8px rgba(26, 31, 33, 0.28));
}

/* ---------- Scenes ---------- */
.scenes-stage {
  display: grid;
}
.scene-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 1rem 1rem 0;
  scrollbar-width: none;
}
.scene-tabs::-webkit-scrollbar {
  display: none;
}
.scene-tab {
  flex: none;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--graphite);
  background: transparent;
  font-weight: 500;
  font-size: 1.0625rem;
  text-align: left;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.scene-tab .n {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--graphite-2);
  font-variant-numeric: tabular-nums;
}
.scene-tab:hover {
  background: var(--film-deep);
}
.scene-tab.is-active {
  background: var(--graphite);
  color: var(--film);
}
.scene-tab.is-active .n {
  color: var(--rule);
}
.scene-panels {
  min-width: 0;
}
.scene-slide {
  display: none;
  padding: 1rem;
}
.scene-slide.is-active {
  display: grid;
  gap: 1.5rem;
  animation: scene-in 0.45s var(--ease-out);
}
@keyframes scene-in {
  from {
    opacity: 0;
  }
}
.scene-slide .view {
  aspect-ratio: 16 / 9.2;
}
.scene-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scene-text {
  display: grid;
  gap: 0.875rem;
  padding: 0 0.25rem 0.5rem;
}
.scene-text h3 {
  font-weight: 600;
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
  max-width: 40rem;
}
.scene-text .imagine {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--graphite-2);
  max-width: 44rem;
}

/* Left, right and pause: small film cells on the picture, like every other control on the sheet */
.scene-slide .view {
  touch-action: pan-y pinch-zoom;
}
.scene-ctrl button {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--graphite);
  background: var(--film);
  color: var(--graphite);
  opacity: 0.7;
  transition: opacity 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.scene-ctrl button:hover {
  background: var(--film-deep);
}
/* A little see-through at rest so the picture leads; solid once the mouse is on the picture or a key reaches them */
@media (hover: hover) {
  .scene-slide .view:hover .scene-ctrl button {
    opacity: 1;
  }
}
.scene-ctrl button:focus-visible {
  opacity: 1;
}
.scene-ctrl .icon {
  width: 1.125rem;
  height: 1.125rem;
}
.scene-ctrl .icon.is-flipped {
  transform: scaleX(-1);
}
.scene-arrow {
  top: 50%;
  margin-top: -1.25rem;
}
.scene-arrow.is-prev {
  left: 0.75rem;
}
.scene-arrow.is-next {
  right: 0.75rem;
}
/* Top right: the question-mark block tends to sit low in the pictures, the sky and walls up here are free */
.scene-play {
  top: 0.75rem;
  right: 0.75rem;
}
.scene-ctrl .scene-play {
  width: 2.25rem;
  height: 2.25rem;
}
.scene-play .icon {
  width: 0.875rem;
  height: 0.875rem;
}
.scene-play .is-play,
.scenes-stage.is-stopped .scene-play .is-pause {
  display: none;
}
.scenes-stage.is-stopped .scene-play .is-play {
  display: block;
}
@media (min-width: 1024px) {
  .scene-ctrl button {
    width: 3rem;
    height: 3rem;
  }
  .scene-arrow {
    margin-top: -1.5rem;
  }
  .scene-arrow.is-prev {
    left: 1rem;
  }
  .scene-arrow.is-next,
  .scene-play {
    right: 1rem;
  }
  .scene-play {
    top: 1rem;
  }
  .scene-ctrl .scene-play {
    width: 2.5rem;
    height: 2.5rem;
  }
}
/* The dwell: the showing tab fills along its foot over 5.5s, stops while held, and is gone when the visitor pauses */
.scene-tab {
  position: relative;
}
.scene-tab.is-timing::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--graphite);
  transform: scaleX(0);
  transform-origin: left center;
  animation: scene-dwell 5.5s linear forwards;
}
.scenes-stage.is-held .scene-tab.is-timing::after {
  animation-play-state: paused;
}
.scenes-stage.is-stopped .scene-tab.is-timing::after {
  display: none;
}
@keyframes scene-dwell {
  to {
    transform: scaleX(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .scene-tab.is-timing::after {
    display: none;
  }
}

/* The key facts, set as the drawing's spec notes */
.spec-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: 1.5rem;
  background: var(--graphite);
}
.spec-strip .strip-item {
  padding: 1.25rem;
  min-width: 0;
  background: var(--film);
}
.spec-strip .num {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: clamp(2.2rem, 3.1vw, 2.75rem);
  line-height: 1.05;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  color: var(--graphite);
}
@media (min-width: 640px) {
  .spec-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .spec-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.spec-strip .lab {
  margin-top: 0.6rem;
  color: var(--graphite-2);
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* ---------- Price guess ---------- */
.price-title {
  font-weight: 600;
  font-size: clamp(2.2rem, 4.8vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 56rem;
  text-wrap: balance;
}
.price-title .printed {
  display: block;
  margin-top: 0.2em;
}
:lang(zh) .price-title {
  letter-spacing: 0;
}
.price-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 2.5rem;
}
.currency-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.currency-switcher button {
  min-height: 2.5rem;
  padding: 0 0.875rem;
  border: 1px solid var(--graphite);
  background: transparent;
  font-weight: 500;
  font-size: 0.9375rem;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.currency-switcher button:hover {
  background: var(--film-deep);
}
.currency-switcher button.active {
  background: var(--graphite);
  color: var(--film);
}
.currency-legend {
  margin-bottom: 0.5rem;
}

/* The draw line: how many tiers are locked in and the action that sends them */
.guess-bar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 1.5rem;
  border: 1px solid var(--graphite);
  background: var(--film);
}
.gb-info {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 1rem;
  min-width: 0;
}
.gb-count {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
}
.gb-hint {
  color: var(--graphite-2);
  font-size: 0.875rem;
  line-height: 1.4;
}
.gb-submit {
  min-height: 3.25rem;
  border: 0;
  border-top: 1px solid var(--graphite);
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  font-size: 1rem;
  padding: 0 1.25rem;
  transition: background-color 0.2s var(--ease-out);
}
.gb-submit:hover:not(:disabled) {
  background: var(--ink-deep);
}
.gb-submit:disabled {
  background: var(--film-deep);
  color: var(--graphite-2);
  cursor: not-allowed;
}

/* ---------- Modal ---------- */
.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
  background: rgba(26, 31, 33, 0.55);
}
.modal-mask.show {
  display: flex;
}
.modal {
  position: relative;
  width: 100%;
  max-width: 34rem;
  margin: auto 0;
  padding: 1.5rem 1.25rem 1.25rem;
  border: 1px solid var(--graphite);
  background: var(--film);
  animation: modal-in 0.35s var(--ease-out);
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
.modal-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 0;
  border-left: 1px solid var(--graphite);
  border-bottom: 1px solid var(--graphite);
  background: transparent;
  transition: background-color 0.2s var(--ease-out);
}
.modal-close:hover {
  background: var(--film-deep);
}
.success-icon {
  display: none;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  place-items: center;
  border: 1px solid var(--graphite);
  background: var(--graphite);
}
.success-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke: var(--film);
}
.modal.success-state .success-icon {
  display: grid;
}
#modalTitle {
  padding-right: 3rem;
  font-weight: 600;
  font-size: clamp(1.35rem, 3.4vw, 1.65rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
:lang(zh) #modalTitle {
  letter-spacing: 0;
}
.modal-sub {
  margin-top: 0.75rem;
  color: var(--graphite-2);
  font-size: 1rem;
  line-height: 1.55;
}
.modal-recap {
  margin: 1.25rem 0;
  border-top: 1px solid var(--graphite);
  border-bottom: 1px solid var(--graphite);
}
.modal-recap .row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}
.modal-recap .row .t {
  color: var(--graphite-2);
  font-size: 0.9375rem;
  line-height: 1.35;
}
.modal-recap .row .p {
  flex: none;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.modal-recap .lottery {
  padding: 0.7rem 0;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite-2);
  line-height: 1.4;
}
:lang(zh) .modal-recap .lottery {
  letter-spacing: 0.04em;
}
.modal.success-state .modal-recap {
  display: none;
}
.field {
  display: block;
  margin-bottom: 1rem;
}
.field > * + * {
  margin-top: 0.5rem;
}
.field > label,
.field > .field-label {
  display: block;
}
.field > label,
.field > .field-label {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--graphite);
}
.field .hint {
  font-weight: 500;
  color: var(--graphite-2);
  letter-spacing: 0;
}
.field input,
.field select {
  width: 100%;
  min-height: 3rem;
  padding: 0 1rem;
  border: 1px solid var(--graphite);
  border-radius: 0;
  background: var(--paper);
  color: var(--graphite);
  font-size: 1rem;
  appearance: none;
  -webkit-appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--graphite) 50%), linear-gradient(135deg, var(--graphite) 50%, transparent 50%);
  background-position: calc(100% - 1.3rem) 55%, calc(100% - 0.95rem) 55%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.field input::placeholder {
  color: var(--graphite-2);
  opacity: 1;
}
.field input:focus-visible,
.field select:focus-visible {
  outline-offset: -2px;
}
.modal.success-state .field,
.modal.success-state .submit-btn {
  display: none;
}
.submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 3.25rem;
  margin-top: 0.5rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  font-size: 1rem;
  transition: background-color 0.2s var(--ease-out);
}
.submit-btn:hover:not(:disabled) {
  background: var(--ink-deep);
}
.submit-btn:disabled {
  cursor: progress;
}
.submit-btn .spinner {
  display: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.submit-btn.loading .spinner {
  display: inline-block;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Reward picker (Chinese page) */
.reward-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--graphite);
}
.reward-option {
  display: grid;
  align-content: start;
  gap: 0.25rem;
  padding: 0.875rem 1rem;
  background: var(--paper);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.reward-option + .reward-option {
  border-left: 1px solid var(--graphite);
}
.reward-option:hover {
  background: var(--film-deep);
}
.reward-option .r-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.25rem;
}
.reward-option .r-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.reward-option .r-label {
  font-weight: 600;
  font-size: 1rem;
}
.reward-option .r-sub {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--graphite-2);
}
.reward-option.selected {
  background: var(--graphite);
  color: var(--film);
}
.reward-option.selected .r-sub {
  color: var(--rule);
}

/* ---------- Share centre ---------- */
.share-panel {
  display: none;
  margin-top: 1.25rem;
}
.modal.success-state .share-panel {
  display: block;
}
.coupon-card {
  border: 1px solid var(--graphite);
  background: var(--paper);
}
.coupon-card .lab {
  padding: 0.75rem 1rem;
  border-bottom: 1px dashed var(--graphite);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--graphite-2);
  line-height: 1.4;
}
.coupon-card .code {
  padding: 1rem 1rem 0.25rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: clamp(1.75rem, 6vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums lining-nums;
  word-break: break-all;
}
.coupon-card .coupon-meta,
.coupon-card #rewardTypeNote {
  padding: 0 1rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--graphite-2);
}
.coupon-card #rewardTypeNote {
  padding-bottom: 1rem;
}
.coupon-card #rewardTypeNote:empty {
  padding-bottom: 0.75rem;
}
.note-strong {
  color: var(--graphite);
  font-weight: 600;
}
.note-small {
  display: block;
  font-size: 0.8125rem;
}
.note-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.note-chips span {
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--graphite);
  font-size: 0.8125rem;
  color: var(--graphite);
}
.stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 1rem;
  border: 1px solid var(--graphite);
}
.stat {
  padding: 0.75rem 1rem;
}
.stat + .stat {
  border-left: 1px solid var(--graphite);
}
.stat .v {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums lining-nums;
}
.stat .l {
  margin-top: 0.2rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite-2);
}
.share-title {
  margin-top: 1.5rem;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.4;
}
.share-link-row {
  display: flex;
  margin-top: 0.75rem;
  border: 1px solid var(--graphite);
}
.share-link-row input {
  flex: 1;
  min-width: 0;
  min-height: 3rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  color: var(--graphite);
  font-size: 0.9375rem;
}
.share-link-row input:focus-visible {
  outline-offset: -2px;
}
.copy-btn {
  flex: none;
  min-height: 3rem;
  padding: 0 1.25rem;
  border: 0;
  border-left: 1px solid var(--graphite);
  background: var(--graphite);
  color: var(--film);
  font-weight: 600;
  transition: background-color 0.2s var(--ease-out);
}
.copy-btn:hover {
  background: var(--graphite-lift);
}
.copy-btn.copied {
  background: var(--paper);
  color: var(--graphite);
}
.share-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.share-actions a,
.share-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--graphite);
  background: transparent;
  color: var(--graphite);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.share-actions a:hover,
.share-actions button:hover {
  background: var(--graphite);
  color: var(--film);
}
.cashback-note {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--graphite);
  background: var(--paper);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--graphite-2);
}
.cashback-note b {
  color: var(--graphite);
}
.redeem-row {
  margin-top: 1rem;
}
.redeem-row .info {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--graphite-2);
}
.redeem-row .info b {
  color: var(--graphite);
}
.redeem-btn {
  width: 100%;
  margin-top: 0.75rem;
  min-height: 2.75rem;
  border: 1px solid var(--graphite);
  background: transparent;
  font-weight: 600;
}
.redeem-btn:disabled {
  background: var(--film-deep);
  border-color: var(--rule);
  color: var(--graphite-2);
  cursor: not-allowed;
}
.extra-coupons:empty {
  display: none;
}
.extra-coupons {
  margin-top: 0.75rem;
  font-family: var(--font-label);
  font-weight: 600;
}
.xhs-share-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.875rem;
  align-items: center;
  margin-top: 1.25rem;
  padding: 0.75rem;
  border: 1px solid var(--graphite);
  background: var(--paper);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out);
}
.xhs-share-card:hover {
  background: var(--film-deep);
}
.xhs-share-card .x-thumb {
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--graphite);
  background: var(--white);
}
.xhs-share-card .x-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.x-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  line-height: 1.3;
}
.x-desc {
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--graphite-2);
}
.x-desc b {
  color: var(--graphite);
  font-family: var(--font-label);
  letter-spacing: 0.04em;
}
.x-go {
  min-height: 2.5rem;
  padding: 0 0.875rem;
  border: 1px solid var(--graphite);
  background: transparent;
  font-weight: 600;
  font-size: 0.9375rem;
}
.xhs-mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  background: var(--rednote);
  color: var(--white);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
}
.mini-meta {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--graphite-2);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.modal-close .icon,
.xhs-card-close .icon {
  width: 1.25rem;
  height: 1.25rem;
}
.xhs-close .icon {
  width: 0.75rem;
  height: 0.75rem;
}
.xhs-card-close {
  display: grid;
  place-items: center;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 120;
  max-width: min(32rem, calc(100vw - 2rem));
  padding: 0.75rem 1rem;
  border: 1px solid var(--graphite);
  background: var(--graphite);
  color: var(--film);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.45;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 0.75rem);
  transition: opacity 0.25s var(--ease-out), transform 0.35s var(--ease-out), visibility 0s linear 0.35s;
}
.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.25s var(--ease-out), transform 0.35s var(--ease-out), visibility 0s;
}
.toast.error {
  background: var(--paper);
  color: var(--graphite);
  font-weight: 600;
}

/* ---------- Footer: the set's title block ---------- */
footer.site-foot {
  margin-top: 6rem;
  padding-bottom: 2.5rem;
}
.foot-frame {
  display: grid;
}
.foot-brand {
  display: grid;
  gap: 1.5rem;
  padding: 1.25rem;
  border-bottom: 1px solid var(--graphite);
}
.foot-brand img {
  height: 4rem;
  width: auto;
}
.foot-brand p {
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.4;
  max-width: 24rem;
}
.foot-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.foot-fields > div {
  padding: 0.75rem 1.25rem;
  min-width: 0;
}
.foot-fields > div:nth-child(even) {
  border-left: 1px solid var(--graphite);
}
.foot-fields > div:nth-child(n + 3) {
  border-top: 1px solid var(--graphite);
}
.foot-fields dd {
  margin-top: 0.25rem;
  font-weight: 500;
  line-height: 1.35;
  word-break: break-word;
}

/* ---------- RedNote follow ---------- */
.xhs-fab {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  display: flex;
  transform: translateY(calc(-1 * var(--fab-lift, 0px)));
  transition: transform 0.18s var(--ease-out);
}
.xhs-fab-open,
.xhs-dock {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0 0.875rem 0 0.625rem;
  border: 1px solid var(--graphite);
  background: var(--film);
  color: var(--graphite);
  font-weight: 600;
  font-size: 0.9375rem;
  transition: background-color 0.2s var(--ease-out);
}
.xhs-fab-open:hover,
.xhs-dock:hover {
  background: var(--film-deep);
}
.xhs-fab .xhs-close {
  position: absolute;
  top: -0.6rem;
  right: -0.6rem;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--graphite);
  background: var(--paper);
  color: var(--graphite);
  line-height: 1;
}
.xhs-fab .xhs-close::after {
  content: "";
  position: absolute;
  inset: -0.5rem;
}
.xhs-fab .xhs-close:hover {
  background: var(--film-deep);
}
/* Docked: the floating button, closed, lands on the footer's RedNote field */
.foot-fields dd .xhs-dock {
  display: inline-flex;
  white-space: nowrap;
  margin-top: 0.5rem;
  font-size: 0.875rem;
}
.foot-fields dd .xhs-dock[hidden] {
  display: none;
}
.xhs-mask {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(26, 31, 33, 0.55);
}
.xhs-mask.open {
  display: flex;
}
.xhs-card {
  position: relative;
  width: 100%;
  max-width: 24rem;
  padding: 1.5rem 1.25rem 1.25rem;
  border: 1px solid var(--graphite);
  background: var(--film);
  text-align: left;
}
.xhs-card h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-right: 3rem;
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.25;
}
.xhs-card-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-left: 1px solid var(--graphite);
  border-bottom: 1px solid var(--graphite);
  background: transparent;
}
.xhs-card-close:hover {
  background: var(--film-deep);
}
.xhs-sub {
  margin-top: 0.75rem;
  color: var(--graphite-2);
  line-height: 1.55;
}
.xhs-qr {
  margin: 1.25rem auto 0;
  width: 12rem;
  border: 1px solid var(--graphite);
  background: var(--white);
  padding: 0.75rem;
}
.xhs-qr img {
  width: 100%;
  height: auto;
}
.xhs-id-row {
  display: flex;
  align-items: stretch;
  margin-top: 1.25rem;
  border: 1px solid var(--graphite);
}
.xhs-id-row .lab {
  display: grid;
  place-items: center;
  padding: 0 0.875rem;
  border-right: 1px solid var(--graphite);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--graphite-2);
}
.xhs-id-row .val {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 0.875rem;
  background: var(--paper);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
}
.xhs-id-row button {
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 0;
  border-left: 1px solid var(--graphite);
  background: var(--graphite);
  color: var(--film);
  font-weight: 600;
}
.xhs-id-row button.copied {
  background: var(--paper);
  color: var(--graphite);
}
.xhs-link {
  display: inline-block;
  margin-top: 1rem;
}
.xhs-tip {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--graphite-2);
}

/* ---------- Reveal on scroll ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* ---------- Wider screens ---------- */
@media (min-width: 640px) {
  .nav-cta .cta-l2 {
    display: inline;
  }
  .nav-cta .cta-l2::before {
    content: "\00a0·\00a0";
  }
  .modal {
    padding: 2rem 2rem 1.75rem;
  }
}
@media (min-width: 768px) {
  .wrap {
    padding-inline: 2rem;
  }
  .sheet {
    margin-top: 9rem;
  }
  .sheet-body {
    margin-top: 3.5rem;
  }
  .hero {
    margin-top: 1.5rem;
  }
  .hero-copy {
    padding: 4.5rem 3rem 3rem;
  }
  .hero-view {
    padding: 2rem;
  }
  .titleblock {
    grid-template-columns: 1fr 1.6fr 1.4fr;
  }
  .titleblock > div {
    padding: 0.75rem 1.25rem;
  }
  .titleblock > div:nth-child(3) {
    grid-column: auto;
    border-left: 1px solid var(--graphite);
    border-top: 0;
  }
  .scene-tabs {
    padding: 1.25rem 1.25rem 0;
  }
  .scene-slide {
    padding: 1.25rem;
  }
  .guess-bar {
    grid-template-columns: 1fr auto;
    bottom: 1rem;
  }
  .gb-info {
    padding: 0.875rem 1.25rem;
  }
  .gb-submit {
    border-top: 0;
    border-left: 1px solid var(--graphite);
    min-width: 15rem;
  }
  .foot-frame {
    grid-template-columns: 5fr 7fr;
  }
  .foot-brand {
    border-bottom: 0;
    border-right: 1px solid var(--graphite);
  }
  .foot-fields > div:nth-child(n + 3) {
    border-top: 1px solid var(--graphite);
  }
}
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 7fr 5fr;
  }
  .hero-copy {
    padding: 5rem 3rem 3.5rem 4rem;
  }
  .hero-view {
    border-top: 0;
    border-left: 1px solid var(--graphite);
  }
  .scene-tabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    overflow: visible;
    padding: 0;
    border-bottom: 1px solid var(--graphite);
  }
  .scene-tab {
    min-height: 3.5rem;
    padding: 0 1.25rem;
    border: 0;
    border-right: 1px solid var(--rule);
  }
  .scene-tab:last-child {
    border-right: 0;
  }
  .scene-slide {
    padding: 2rem;
  }
  .scene-slide.is-active {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    align-items: end;
    gap: 2.5rem;
  }
  .scene-text {
    padding: 0 0 2.25rem;
  }
}

/* ---------- Three views: one lettered view per tier, each price a graduation on its scale ---------- */
.tier-stage {
  display: grid;
  margin-top: 1.5rem;
}
.tier-card {
  display: grid;
  align-content: start;
  min-width: 0;
  border: 1px solid var(--graphite);
  background: var(--film);
}

/* Print specimen: each tier's model name, printed the way that model prints.
   Mono in one black ink, Color in a four-colour CMYK halftone, Pro in the brand ink over section hatching
   for wood, concrete and steel. This strip is the only place process colour appears on the sheet. */
.tier-specimen {
  position: relative;
  height: 7rem;
  border-bottom: 1px solid var(--graphite);
  background: var(--paper);
  overflow: hidden;
}
.specimen-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.specimen-word {
  position: absolute;
  left: 1.25rem;
  bottom: 0.9rem;
  font-size: 4.25rem;
  line-height: 0.8;
  color: var(--graphite);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 calc(var(--dot) * 0.47), transparent calc(var(--dot) * 0.52));
  mask-image: radial-gradient(circle at 50% 50%, #000 0 calc(var(--dot) * 0.47), transparent calc(var(--dot) * 0.52));
  -webkit-mask-size: var(--dot) var(--dot);
  mask-size: var(--dot) var(--dot);
}
[data-specimen="mono"] .specimen-word {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 600;
}
[data-specimen="color"] .specimen-word {
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  color: var(--ink);
}
[data-specimen="pro"] .specimen-word {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  color: var(--ink);
}
.tier-specimen.is-drawn .specimen-word {
  visibility: hidden;
}
/* Each view is named underneath, like every other view on the sheet */
.tier-cap {
  margin-bottom: 1.5rem;
}
.tier-cap:last-child {
  margin-bottom: 0;
}
.tier-head {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 1.25rem;
}
.tier-name .nw {
  white-space: nowrap;
}
.tier-tagline b {
  font-weight: 600;
  color: var(--graphite);
}
.tier-name {
  font-weight: 600;
  font-size: clamp(1.3rem, 1.9vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
:lang(zh) .tier-name {
  letter-spacing: 0;
}
.tier-cap {
  align-items: center;
}
.tier-state {
  flex: none;
  margin-left: auto;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--rule);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite-2);
  white-space: nowrap;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.tier-state::before {
  content: attr(data-off);
}
.tier-stage:has(.tier-card[data-tier="bw"].has-pick) .tier-cap[data-for="bw"] .tier-state,
.tier-stage:has(.tier-card[data-tier="color"].has-pick) .tier-cap[data-for="color"] .tier-state,
.tier-stage:has(.tier-card[data-tier="pro"].has-pick) .tier-cap[data-for="pro"] .tier-state {
  border-color: var(--graphite);
  background: var(--graphite);
  color: var(--film);
}
.tier-stage:has(.tier-card[data-tier="bw"].has-pick) .tier-cap[data-for="bw"] .tier-state::before,
.tier-stage:has(.tier-card[data-tier="color"].has-pick) .tier-cap[data-for="color"] .tier-state::before,
.tier-stage:has(.tier-card[data-tier="pro"].has-pick) .tier-cap[data-for="pro"] .tier-state::before {
  content: attr(data-on);
}
.tier-tagline {
  color: var(--graphite-2);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.tier-feats {
  padding: 0 1.25rem;
  border-top: 1px solid var(--graphite);
}
.feat {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
  line-height: 1.35;
}
.feat:last-child {
  border-bottom: 0;
}
.feat .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--graphite-2);
}

/* The keys. Each price is a raised key standing on a 6px side in its tier's own colour: Mono black,
   Color lemon, Pro lilac, the same field its head wears (user decision, 2026-09-27).
   A key lifts under the pointer, goes down when pressed and stays down once picked.
   The custom price is the sixth key of the set, its entry an underlined blank.
   Phones and tablets: one row of five, highest to lowest, the custom key full width below. */
.tier-card {
  --key-side: var(--graphite);
}
.tier-card[data-tier="color"] {
  --key-side: var(--lemon);
}
.tier-card[data-tier="pro"] {
  --key-side: var(--lilac);
}
.price-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 1rem 1rem 1.125rem;
  border-top: 1px solid var(--graphite);
}
.price-btn,
.tier-card .custom-row {
  position: relative;
  border: 1px solid var(--graphite);
  background: var(--paper);
  color: var(--graphite);
  transform: translateY(0);
  transition: transform 0.12s var(--ease-out), background-color 0.18s var(--ease-out), color 0.18s var(--ease-out);
}
.price-btn::after,
.tier-card .custom-row::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: 100%;
  height: 6px;
  border: 1px solid var(--graphite);
  border-top: 0;
  background: var(--key-side);
  pointer-events: none;
  transition: height 0.12s var(--ease-out);
}
@media (hover: hover) {
  .price-btn:hover,
  .tier-card .custom-row:hover {
    transform: translateY(-2px);
  }
  .price-btn:hover::after,
  .tier-card .custom-row:hover::after {
    height: 8px;
  }
}
.price-btn:active,
.tier-card .custom-row:active {
  transform: translateY(6px);
}
.price-btn:active::after,
.tier-card .custom-row:active::after {
  height: 0;
  border-bottom-width: 0;
}
.price-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-content: center;
  justify-content: center;
  gap: 0.1rem;
  min-width: 0;
  min-height: 3rem;
  padding: 0 0.25rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}
.price-btn .currency {
  font-size: 0.6875rem;
  color: var(--graphite-2);
}
.price-btn .amount {
  font-size: 1.0625rem;
  line-height: 1;
}
/* Picked: the key stays down on a 2px side and fills Graphite */
.price-btn.selected,
.price-btn.selected:hover,
.tier-card:has(.price-btn.custom.selected) .custom-row {
  transform: translateY(4px);
  background: var(--graphite);
  color: var(--film);
}
.price-btn.selected::after,
.price-btn.selected:hover::after,
.tier-card:has(.price-btn.custom.selected) .custom-row::after {
  height: 2px;
}
.price-btn.selected .currency {
  color: var(--rule);
}
/* Narrow phones: tighter keys so a four-digit price keeps its currency on the same line */
@media (max-width: 419px) {
  .price-grid {
    gap: 0.375rem;
    padding-inline: 0.875rem;
  }
  .price-btn {
    padding: 0 0.125rem;
  }
  .price-btn .currency {
    font-size: 0.625rem;
  }
  .price-btn .amount {
    font-size: 1rem;
  }
  .tier-stage .tier-card .custom-row {
    margin-inline: 0.875rem;
  }
}
/* The page script's own Custom price toggle stays in the markup, hidden: the custom key below is always
   open, and the toggle still carries the selected state the key reads. */
.price-btn.custom {
  display: none;
}

/* The custom key: "Custom price:", the currency and an underlined blank to type in, and a small Lock it in */
.tier-card .custom-row {
  /* The page script hides this row after Lock it in; the key stays in place regardless */
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  margin: 0 1rem 1.75rem;
  padding: 0 0.375rem 0 0.75rem;
  cursor: text;
}
.custom-label {
  flex: none;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  white-space: nowrap;
  cursor: text;
}
.custom-field {
  display: contents;
}
.custom-input-wrap {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  min-width: 0;
  border-bottom: 1px solid currentColor;
}
.custom-input-wrap span {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--graphite-2);
}
.custom-input-wrap input {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 1.875rem;
  padding: 0 0.125rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums lining-nums;
  -moz-appearance: textfield;
}
.custom-input-wrap input::-webkit-outer-spin-button,
.custom-input-wrap input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.custom-input-wrap input::placeholder {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--graphite-2);
  opacity: 1;
}
.custom-input-wrap input:focus-visible {
  outline-offset: 1px;
}
.custom-submit {
  flex: none;
  min-height: 2.125rem;
  padding: 0 0.625rem;
  border: 1px solid var(--graphite);
  background: var(--graphite);
  color: var(--film);
  font-weight: 600;
  font-size: 0.8125rem;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.custom-submit:hover {
  background: var(--graphite-lift);
}
.tier-card:has(.price-btn.custom.selected) .custom-input-wrap span {
  color: var(--rule);
}
.tier-card:has(.price-btn.custom.selected) .custom-submit {
  border-color: var(--film);
  background: var(--film);
  color: var(--graphite);
}

/* Draw weight: one cell per tier, printed in ink once that tier is locked in */
.gb-weights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--graphite);
}
.gb-weights li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.6rem 1rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite-2);
}
.gb-weights li + li {
  border-left: 1px solid var(--graphite);
}
.gb-weights li::before {
  content: "";
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  box-shadow: inset 0 0 0 1px var(--graphite);
  background: var(--paper);
}
.price-section:has(.tier-card[data-tier="bw"].has-pick) .gb-weights [data-tier="bw"],
.price-section:has(.tier-card[data-tier="color"].has-pick) .gb-weights [data-tier="color"],
.price-section:has(.tier-card[data-tier="pro"].has-pick) .gb-weights [data-tier="pro"] {
  color: var(--graphite);
}
.price-section:has(.tier-card[data-tier="bw"].has-pick) .gb-weights [data-tier="bw"]::before {
  background-color: var(--paper);
  background-image: radial-gradient(circle at 50% 50%, #15191b 0 1.5px, transparent 1.75px);
  background-size: var(--dot) var(--dot);
}
.price-section:has(.tier-card[data-tier="color"].has-pick) .gb-weights [data-tier="color"]::before {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 50% 50%, #00a3e0 0 1.3px, transparent 1.55px),
    radial-gradient(circle at 50% 50%, #e4007c 0 1.3px, transparent 1.55px),
    radial-gradient(circle at 50% 50%, #ffe100 0 1.3px, transparent 1.55px);
  background-size: var(--dot) var(--dot);
  background-position: 0 0, 2px 0, 1px 2px;
  background-blend-mode: multiply;
}
.price-section:has(.tier-card[data-tier="pro"].has-pick) .gb-weights [data-tier="pro"]::before {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 50% 50%, var(--ink) 0 1.3px, transparent 1.55px),
    repeating-linear-gradient(45deg, var(--construction) 0 1px, transparent 1px 3.5px);
  background-size: var(--dot) var(--dot), auto;
}

@media (min-width: 768px) {
  .guess-bar {
    grid-template-columns: 1fr auto auto;
  }
  .gb-weights {
    grid-template-columns: repeat(3, auto);
    border-top: 0;
    border-left: 1px solid var(--graphite);
  }
  .gb-weights li {
    padding: 0 1rem;
  }
}

/* Side by side: rows are shared across the three views, so the scales line up */
@media (min-width: 960px) {
  .tier-specimen {
    height: 7.5rem;
  }
  .tier-stage {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto auto auto;
    column-gap: 1.25rem;
  }
  .tier-card {
    grid-row: 1 / span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .tier-card[data-tier="bw"],
  .tier-cap[data-for="bw"] {
    grid-column: 1;
  }
  .tier-card[data-tier="color"],
  .tier-cap[data-for="color"] {
    grid-column: 2;
  }
  .tier-card[data-tier="pro"],
  .tier-cap[data-for="pro"] {
    grid-column: 3;
  }
  .tier-cap {
    grid-row: 6;
    margin-bottom: 0;
  }
  /* The keys stack in the column, so the same rank lines up across the three views;
     the custom key closes the stack at the same spacing */
  .price-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1rem;
  }
  .price-btn {
    min-height: 3rem;
  }
  .price-btn .currency {
    font-size: 0.875rem;
    padding-right: 0.1rem;
  }
  .price-btn .amount {
    font-size: 1.5rem;
  }
  .tier-card .custom-row {
    margin: 0 1.25rem 1.75rem;
  }
}

/* Phones: a compact draw bar, count on top, weights beside the action */
@media (max-width: 767px) {
  .guess-bar {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .gb-info {
    grid-column: 1 / -1;
    padding: 0.6rem 0.875rem;
  }
  .gb-hint {
    display: none;
  }
  .gb-count {
    font-size: 0.9375rem;
  }
  .gb-weights li {
    justify-content: center;
    gap: 0.35rem;
    padding: 0 0.5rem;
    letter-spacing: 0.04em;
  }
  .gb-submit {
    min-height: 3rem;
    border-top: 1px solid var(--graphite);
    border-left: 1px solid var(--graphite);
    padding: 0 0.875rem;
    font-size: 0.9375rem;
    white-space: nowrap;
  }
}
/* The narrowest phones keep every tier name beside its box, set smaller */
@media (max-width: 419px) {
  .gb-weights li {
    gap: 0.25rem;
    padding: 0 0.25rem;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
  }
  .gb-weights li::before {
    width: 0.75rem;
    height: 0.75rem;
  }
}

/* ---------- Colour fields ---------- */
[data-hue="lemon"] { --hue: var(--lemon); }
[data-hue="coral"] { --hue: var(--coral); }
[data-hue="sky"] { --hue: var(--sky); }
[data-hue="mint"] { --hue: var(--mint); }
[data-hue="tangerine"] { --hue: var(--tangerine); }
[data-hue="lilac"] { --hue: var(--lilac); }

/* Hero: the drawing on a lemon field, a coupon ticket beside the button */
/* the whole view cell is one lemon block */
.hero-view:has(.view--lemon) {
  background: var(--lemon);
}
.view--lemon {
  border: 0;
  padding: 0;
  background: var(--lemon);
}
.hero-view:has(.view--lemon) .view-cap span {
  color: var(--graphite);
}
.dw-apple {
  fill: var(--coral);
  stroke: var(--graphite);
  stroke-width: 1.4px;
  vector-effect: non-scaling-stroke;
}
.dw-leaf {
  fill: var(--mint);
  stroke: var(--graphite);
  stroke-width: 1.2px;
  vector-effect: non-scaling-stroke;
}
.view--lemon .dw-label {
  fill: var(--graphite);
}
.cf {
  stroke: var(--graphite);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.cf-coral { fill: var(--coral); }
.cf-sky { fill: var(--sky); }
.cf-mint { fill: var(--mint); }
.cf-lilac { fill: var(--lilac); }
.cf-tangerine { fill: var(--tangerine); }
.dw-ticket {
  fill: var(--paper);
  stroke: var(--graphite);
  stroke-width: 1.2px;
  vector-effect: non-scaling-stroke;
}
.dw-perf {
  stroke: var(--graphite);
  stroke-width: 1px;
  stroke-dasharray: 2 2;
  vector-effect: non-scaling-stroke;
}
.dw-pct {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  fill: var(--graphite);
}
.hero-actions {
  align-items: center;
}
.hero-ticket {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0 1.4rem;
  border: 1px solid var(--graphite);
  background: var(--lemon);
  color: var(--graphite);
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
  transition: background-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.hero-ticket::before,
.hero-ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: -0.45rem;
  border: 1px solid var(--graphite);
  border-radius: 50%;
  background: var(--film);
}
.hero-ticket::before {
  left: -0.5rem;
}
.hero-ticket::after {
  right: -0.5rem;
}
.hero-ticket:hover {
  transform: rotate(-2deg);
}

/* Scenes: every moment has its colour, on its tab and behind its picture */
.scene-tab[data-hue].is-active {
  background: var(--hue);
  color: var(--graphite);
}
.scene-tab[data-hue].is-active .n {
  color: var(--graphite);
}
/* The words are a cell of the scene frame itself: full width under the picture on phones,
   the right-hand column from 1024px, divided from the picture by one graphite rule */
.scene-slide[data-hue] {
  padding: 0;
}
.scene-slide[data-hue].is-active {
  gap: 0;
}
.scene-slide[data-hue] figure {
  padding: 1rem;
}
.scene-slide[data-hue] .scene-text {
  align-self: stretch;
  align-content: end;
  padding: 1.25rem 1.25rem 1.5rem;
  border-top: 1px solid var(--graphite);
  background: var(--hue);
}
.scene-slide[data-hue] .scene-text .imagine {
  color: var(--graphite);
}
@media (min-width: 768px) {
  .scene-slide[data-hue] figure {
    padding: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .scene-slide[data-hue] figure {
    padding: 2rem;
  }
  .scene-slide[data-hue] .scene-text {
    padding: 2rem 2rem 2.25rem;
    border-top: 0;
    border-left: 1px solid var(--graphite);
  }
}

/* Key facts: four colour blocks, graphite lettering throughout */
.spec-strip .strip-item[data-hue] {
  background: var(--hue);
}
.spec-strip .strip-item[data-hue] .num,
.spec-strip .strip-item[data-hue] .lab {
  color: var(--graphite);
}

/* Prizes: four tiles, each a line-art prize on a flat colour */
.prize-grid {
  display: grid;
  gap: 1px;
  margin-top: 2rem;
  border: 1px solid var(--graphite);
  background: var(--graphite);
}
.prize {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--hue);
}
.prize p {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--graphite);
}
.prize b {
  font-weight: 600;
}
.prize-art {
  width: 100%;
  height: auto;
  overflow: visible;
}
.pz-paper {
  fill: var(--paper);
  stroke: var(--graphite);
  stroke-width: 1.5px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.pz-line {
  fill: none;
  stroke: var(--graphite);
  stroke-width: 1.5px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.pz-dash {
  fill: none;
  stroke: var(--graphite);
  stroke-width: 1.5px;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}
.pz-ink {
  fill: var(--graphite);
}
.pz-mark {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 30px;
  fill: var(--graphite);
}
.pz-badge {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 12px;
  fill: var(--film);
}
@media (min-width: 640px) {
  .prize-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .prize-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .prize {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 1.25rem;
    padding: 1.75rem 1.5rem 2rem;
  }
  .prize-art {
    width: 11.5rem;
    margin-inline: -0.5rem;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .prize:hover .prize-art {
    transform: rotate(-4deg) scale(1.04);
  }
  .prize-art {
    transition: transform 0.35s var(--ease-out);
  }
}

/* Tiers: Mono stays black and white; Color and Pro carry their fields in the head and feature list */
.tier-card[data-hue] .tier-head,
.tier-card[data-hue] .tier-feats {
  background: var(--hue);
}
.tier-card[data-hue] .tier-tagline,
.tier-card[data-hue] .feat .icon {
  color: var(--graphite);
}
.tier-card[data-hue] .feat {
  border-bottom-color: rgba(26, 31, 33, 0.22);
}
.tier-card[data-hue] .feat:last-child {
  border-bottom: 0;
}

/* Share centre: the coupon on lemon */
.coupon-card {
  background: var(--lemon);
}
.coupon-card .lab,
.coupon-card .coupon-meta,
.coupon-card #rewardTypeNote {
  color: var(--graphite);
}

/* Footer: a print colour bar across the top of the title block */
.colour-bar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  height: 0.625rem;
  border-bottom: 1px solid var(--graphite);
}
.colour-bar span {
  background: var(--hue);
}
.colour-bar span + span {
  border-left: 1px solid var(--graphite);
}

/* All three locked in: the draw bar's status lights up */
.price-section:has(.tier-card[data-tier="bw"].has-pick):has(.tier-card[data-tier="color"].has-pick):has(.tier-card[data-tier="pro"].has-pick) .gb-info {
  background: var(--lemon);
  transition: background-color 0.3s var(--ease-out);
}
.price-section:has(.tier-card[data-tier="bw"].has-pick):has(.tier-card[data-tier="color"].has-pick):has(.tier-card[data-tier="pro"].has-pick) .gb-hint {
  color: var(--graphite);
}

/* ---------- Reduced motion ---------- */
/* Pro's surfaces: six printed materials after the three views, each shot on one of the six fields.
   Generated renders, so the caption says illustration like the scene views. */
.surfaces-fig {
  margin-top: 1.5rem;
}
.surfaces {
  display: grid;
  border: 1px solid var(--graphite);
  background: var(--hue);
}
.surfaces-intro {
  display: grid;
  align-content: space-between;
  gap: 0.5rem;
  padding: 1.25rem;
  border-bottom: 1px solid var(--graphite);
  color: var(--graphite);
}
.surfaces-intro h3 {
  font-weight: 600;
  font-size: clamp(1.3rem, 1.9vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
:lang(zh) .surfaces-intro h3 {
  letter-spacing: 0;
}
.surfaces-intro p {
  font-size: 1rem;
  line-height: 1.5;
}
.surfaces-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--graphite);
}
.surfaces-grid li {
  display: grid;
  min-width: 0;
  background: var(--tile, var(--hue));
}
.surfaces-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.surfaces-grid span {
  padding: 0 0.75rem 0.7rem;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  color: var(--graphite);
}
@media (min-width: 720px) {
  .surfaces-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .surfaces-grid img {
    aspect-ratio: 4 / 3;
  }
  .surfaces-grid span {
    padding: 0 1rem 0.9rem;
    font-size: 0.9375rem;
  }
}
@media (min-width: 1024px) {
  .surfaces {
    grid-template-columns: 3fr 9fr;
  }
  .surfaces-intro {
    padding: 2rem;
    border-bottom: 0;
    border-right: 1px solid var(--graphite);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .xhs-dock.is-arriving {
    animation: dock-arrive 0.9s var(--ease-out) 1;
  }
  @keyframes dock-arrive {
    0% { transform: translateY(-0.75rem); background: var(--lemon); }
    45% { transform: translateY(0); background: var(--lemon); }
    100% { background: var(--film); }
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
  .js .hero-title .print-line {
    clip-path: none !important;
  }
}