.saiwei-page {
  --blue-950: #0b0d10;
  --blue-900: #0d0d0d;
  --blue-800: #272727;
  --blue-700: #c7ff2e;
  --blue-600: #d7ff66;
  --blue-300: #c7ff2e;
  --blue-100: #f2ffde;
  --cream: #ffffff;
  --cream-2: #f4f6f8;
  --cream-3: #e5e7eb;
  --silver-50: #ffffff;
  --silver-100: #f4f6f8;
  --silver-200: #e5e7eb;
  --silver-300: #dbdbdb;
  --silver-400: #9f9f9f;
  --silver-600: #555555;
  --ink: #0d0d0d;
  --muted: #505050;
  --line: rgba(17, 24, 39, 0.15);
  --content: min(calc(100% - 36px), 1350px);
  width: 100%;
  overflow: hidden;
  color: var(--ink);
  background: var(--cream);
  font-family:
    "Outfit",
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  --soft-border: rgba(17, 24, 39, 0.1);
  --soft-border-light: rgba(17, 24, 39, 0.075);
  --soft-shadow: 0 16px 42px rgba(17, 24, 39, 0.075);
  --soft-shadow-sm: 0 9px 25px rgba(17, 24, 39, 0.055);
}

.saiwei-page img,
.saiwei-page video {
  display: block;
  max-width: 100%;
}

.saiwei-page .skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  transform: translateY(-160%);
  background: var(--cream);
  color: var(--blue-900);
  padding: 12px 16px;
  border: 1px solid var(--silver-300);
  font-weight: 800;
  border-radius: 12px;
}

.saiwei-page .kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #0b0d10;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.saiwei-page .kicker::before {
  content: "";
  width: 34px;
  height: 2px;
  background: #c7ff2e;
}

.saiwei-page .display {
  margin: 0;
  font-size: clamp(2rem, 4vw, 5rem);
  line-height: 0.88;
  letter-spacing: -0.065em;
  font-weight: 930;
}

.saiwei-page .section-title {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3.3rem);
  line-height: 0.94;
  letter-spacing: -0.055em;
  font-weight: 920;
}

.saiwei-page .section-copy {
  margin: 20px 0 0;
  max-width: 800px;
  color: var(--muted);
  font-size: 1.06rem;
}

.saiwei-page .btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px;
  border: 1px solid transparent;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: 0.2s ease;
  border-radius: 999px;
}

.saiwei-page .btn-primary {
  background: var(--blue-700);
  color: #0b0d10;
  box-shadow: 0 14px 34px rgba(11, 13, 16, 0.24);
}

.saiwei-page .btn-cream {
  background: var(--cream);
  color: var(--blue-900);
  border-color: rgba(255, 255, 255, 0.35);
}

.saiwei-page .btn-outline {
  border-color: var(--silver-400);
  color: var(--blue-900);
  background: transparent;
}

.saiwei-page .site-header {
  position: relative;
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--silver-200);
  backdrop-filter: blur(16px);
}

.saiwei-page .header-inner {
  width: var(--content);
  min-height: 76px;
  margin: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 26px;
  align-items: center;
}

.saiwei-page .brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--blue-900);
  font-size: 0.95rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.saiwei-page .brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--blue-700);
  color: #0b0d10;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

.saiwei-page .desktop-nav {
  display: flex;
  justify-content: center;
  gap: 25px;
}

.saiwei-page .desktop-nav a {
  font-size: 0.82rem;
  font-weight: 760;
  color: #424242;
}

.saiwei-page .menu-btn {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--silver-300);
  background: var(--cream);
  color: var(--blue-900);
  border-radius: 14px;
}

.saiwei-page .menu-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.saiwei-page .mobile-menu {
  position: absolute;
  top: 76px;
  left: 18px;
  right: 18px;
  background: var(--cream);
  border: 1px solid var(--silver-300);
  box-shadow: 0 25px 60px rgba(17, 24, 39, 0.12);
  padding: 10px;
  border-radius: 18px;
  overflow: hidden;
}

.saiwei-page .mobile-menu a {
  display: block;
  padding: 13px 12px;
  border-bottom: 1px solid var(--silver-200);
  font-weight: 750;
}

.saiwei-page .hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 740px;
  overflow: hidden;
  background: var(--blue-950);
  border-bottom: 1px solid var(--silver-300);
}

/* Full-bleed background photo + readability scrim, both behind the copy. */
.saiwei-page .hero-bg,
.saiwei-page .hero-bg img,
.saiwei-page .hero-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.saiwei-page .hero-bg {
  z-index: 0;
}

.saiwei-page .hero-bg img {
  display: block;
  object-fit: cover;
  object-position: center;
}

.saiwei-page .hero-scrim {
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(6, 10, 8, 0.9) 0%,
    rgba(6, 10, 8, 0.74) 40%,
    rgba(6, 10, 8, 0.38) 66%,
    rgba(6, 10, 8, 0.08) 100%
  );
}

.saiwei-page .hero-grid {
  position: relative;
  z-index: 2;
  width: var(--content);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 96px 0;
}

.saiwei-page .hero-copy {
  max-width: 720px;
  padding: 0;
}

.saiwei-page .breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 34px;
  color: var(--silver-600);
  font-size: 0.78rem;
  font-weight: 700;
}

.saiwei-page .breadcrumb span {
  color: var(--silver-400);
}

/* Hero copy sits on the photo, so everything in it is light-on-dark. */
.saiwei-page .hero .breadcrumb,
.saiwei-page .hero .breadcrumb a {
  color: rgba(255, 255, 255, 0.82);
}

.saiwei-page .hero .breadcrumb span {
  color: rgba(255, 255, 255, 0.5);
}

.saiwei-page .hero .kicker {
  color: #fff;
}

.saiwei-page .hero h1 {
  max-width: 800px;
  color: #fff;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.3);
}

.saiwei-page .hero .display em {
  color: var(--blue-300);
}

.saiwei-page .hero-lead {
  max-width: 690px;
  margin: 28px 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.06rem, 1.55vw, 1.28rem);
  line-height: 1.65;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.26);
}

.saiwei-page .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.saiwei-page .hero-actions .btn-primary {
  background: var(--cream);
  color: var(--blue-950);
  border-color: var(--cream);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.3);
}

.saiwei-page .hero-actions .btn-primary:hover {
  transform: translateY(-1px);
}

.saiwei-page .hero-actions .btn-outline {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.saiwei-page .hero-actions .btn-outline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.18);
}

.saiwei-page .hero-note {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.86rem;
  font-weight: 800;
}

.saiwei-page .hero-note::before {
  content: "";
  width: 42px;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
}

.saiwei-page .stage-grid {
  position: absolute;
  inset: 48px 8px 48px 0;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 16%,
    #000 84%,
    transparent
  );
}

.saiwei-page .guard-set {
  position: relative;
  width: 330px;
  height: 500px;
}

.saiwei-page .guard {
  position: absolute;
  top: 28px;
  width: 138px;
  height: 420px;
  border-radius: 58% 42% 45% 55% / 13% 15% 85% 87%;
  background: linear-gradient(
    125deg,
    #f9fbff 0%,
    var(--silver-200) 22%,
    #fff 45%,
    var(--silver-400) 68%,
    #f5f7f9 100%
  );
  box-shadow:
    inset -18px -8px 28px rgba(17, 24, 39, 0.17),
    0 28px 60px rgba(17, 24, 39, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.75);
}

.saiwei-page .guard::before {
  content: "YOUR\A ART";
  white-space: pre;
  position: absolute;
  inset: 42px 12px auto;
  text-align: center;
  color: #c7ff2e;
  font-size: 1.16rem;
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: 0.06em;
}

.saiwei-page .guard::after {
  content: "07";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 74px;
  text-align: center;
  color: var(--blue-900);
  font-size: 4rem;
  font-weight: 950;
  line-height: 1;
}

.saiwei-page .guard.left {
  left: 36px;
  transform: rotate(-8deg);
}

.saiwei-page .guard.right {
  right: 30px;
  top: 48px;
  transform: rotate(9deg);
}

.saiwei-page .hero-spec {
  align-self: center;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(209, 213, 219, 0.9);
  box-shadow: 0 24px 80px rgba(17, 24, 39, 0.22);
  margin-left: -26px;
  position: relative;
  z-index: 4;
  border-radius: 16px;
}

.saiwei-page .spec-head {
  padding: 18px 18px 16px;
  background: var(--silver-100);
  border-bottom: 1px solid var(--silver-300);
}

.saiwei-page .spec-head small {
  display: block;
  color: var(--silver-600);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.saiwei-page .spec-head b {
  display: block;
  margin-top: 4px;
  color: var(--blue-900);
  font-size: 1rem;
}

.saiwei-page .spec-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--silver-200);
  font-size: 0.78rem;
}

.saiwei-page .spec-row span {
  color: var(--muted);
}

.saiwei-page .spec-row b {
  color: var(--blue-900);
  text-align: right;
}

.saiwei-page .spec-foot {
  padding: 14px 18px;
  color: var(--silver-600);
  font-size: 0.68rem;
  line-height: 1.45;
}

.saiwei-page .fact-rail {
  background: var(--silver-100);
  border-bottom: 1px solid var(--silver-300);
}

.saiwei-page .fact-grid {
  width: var(--content);
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.saiwei-page .fact {
  min-height: 104px;
  padding: 22px 26px;
  border-right: 1px solid var(--silver-300);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.saiwei-page .fact:first-child {
  border-left: 1px solid var(--silver-300);
}

.saiwei-page .fact-num {
  color: #0b0d10;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.saiwei-page .fact b {
  display: block;
  color: var(--blue-950);
  font-size: 0.93rem;
  line-height: 1.25;
}

.saiwei-page .fact small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.4;
}

.saiwei-page .answer-strip {
  padding: 54px 0;
  border-bottom: 1px solid var(--silver-200);
}

.saiwei-page .answer-grid {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 50px;
  align-items: start;
}

.saiwei-page .answer-label {
  color: #0b0d10;
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.saiwei-page .answer-grid p {
  margin: 0;
  max-width: 960px;
  color: var(--blue-950);
  font-size: clamp(1.25rem, 2vw, 1.25rem);
  line-height: 1.42;
  letter-spacing: -0.02em;
}

.saiwei-page .studio {
  padding: 80px 0;
  background: var(--cream);
}

.saiwei-page .studio-head {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  gap: 72px;
  align-items: end;
  margin-bottom: 50px;
}

.saiwei-page .studio-head .section-copy {
  margin: 0;
}

.saiwei-page .studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  border-top: 1px solid var(--silver-300);
  border-bottom: 1px solid var(--silver-300);
}
.saiwei-page .materials {
  padding: 0 !important;
}
.saiwei-page .design-canvas {
  min-height: 700px;
  position: relative;
  background: linear-gradient(155deg, #0b0d10, #272727);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.saiwei-page .design-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 20% 15%,
      rgba(255, 255, 255, 0.16),
      transparent 30%
    ),
    linear-gradient(
      90deg,
      transparent 49.8%,
      rgba(255, 255, 255, 0.16) 50%,
      transparent 50.2%
    );
}

.saiwei-page .canvas-note {
  position: absolute;
  left: 28px;
  top: 28px;
  color: white;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.saiwei-page .canvas-path {
  position: absolute;
  left: 28px;
  bottom: 28px;
  color: var(--blue-300);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.saiwei-page .mock-photo {
  width: min(72%, 520px);
  aspect-ratio: 4/5;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.03)
  );
  display: grid;
  place-items: center;
  color: white;
  text-align: center;
  padding: 30px;
  box-shadow: 0 35px 80px rgba(3, 12, 30, 0.28);
}

.saiwei-page .mock-photo b {
  display: block;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

.saiwei-page .mock-photo span {
  display: block;
  margin-top: 8px;
  color: var(--blue-300);
  font-size: 0.78rem;
}

.saiwei-page .design-stack {
  background: var(--cream-2);
}

.saiwei-page .design-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 24px;
  padding: 34px 34px 34px 28px;
  border-bottom: 1px solid var(--silver-300);
  min-height: 170px;
  transition: 0.2s ease;
}

.saiwei-page .design-row:last-child {
  border-bottom: 0;
}

.saiwei-page .design-row:hover {
  background: var(--silver-100);
}

.saiwei-page .design-num {
  font-size: 2rem;
  color: var(--silver-400);
  font-weight: 300;
  letter-spacing: -0.05em;
}

.saiwei-page .design-row h3 {
  margin: 0;
  color: var(--blue-950);
  font-size: 1.35rem;
  line-height: 1.1;
}

.saiwei-page .design-row p {
  margin: 11px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.saiwei-page .design-row a {
  display: inline-block;
  margin-top: 12px;
  color: #0b0d10;
  font-size: 0.8rem;
  font-weight: 850;
}

.saiwei-page .materials {
  background: var(--blue-950);
  color: white;
}

.saiwei-page .material-intro {
  width: var(--content);
  margin: auto;
  padding: 70px 0 45px;
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 60px;
  align-items: end;
}

.saiwei-page .materials .kicker {
  color: var(--blue-300);
}

.saiwei-page .materials .kicker::before {
  background: #c7ff2e;
}

.saiwei-page .materials .section-copy {
  color: #dbdbdb;
  margin: 0;
}

.saiwei-page .material-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(209, 213, 219, 0.28);
}

.saiwei-page .material-panel {
  min-height: 520px;
  padding: 60px max(28px, calc((100vw - 1350px) / 2));
  position: relative;
  overflow: hidden;
}

/* The product shot is a real lazy-loaded <img> layer rather than a CSS
   background, so it stays off the critical path, and the scrim is a sibling
   element that sits between the photo and the copy.
   Narrow screens fill the panel with the shot (cropped); the wide-screen
   override further down switches it to a whole, right-anchored picture so it
   is never clipped.
   Layer order is load-bearing: the photo must stay under the scrim, which must
   stay under the copy (same 0/1/2 stack as .hero-bg/.hero-scrim/.hero-grid
   above). Put the photo on top and the scrim stops washing anything, which
   makes the copy unreadable wherever it crosses the picture. */
.saiwei-page .material-bg,
.saiwei-page .material-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.saiwei-page .material-bg {
  z-index: 1;
  display: block;
  object-fit: cover;
  object-position: center;
}

.saiwei-page .material-scrim {
  z-index: 1;
}

.saiwei-page .material-panel h3,
.saiwei-page .material-panel p,
.saiwei-page .material-actions {
  position: relative;
  z-index: 2;
}

/* Carbon fibre panel: left-anchored dark scrim so the white copy stays legible
   over the bright centre of the photo. */
.saiwei-page .material-panel:first-child {
  padding-right: 70px;
  background-color: #0b0d10;
  border-right: 1px solid rgba(209, 213, 219, 0.28);
}

.saiwei-page .material-panel:first-child .material-scrim {
  background: linear-gradient(
    100deg,
    rgba(5, 8, 13, 0.66) 0%,
    rgba(5, 8, 13, 0.8) 20%,
    rgba(5, 8, 13, 0.8) 66%,
    rgba(5, 8, 13, 0.72) 82%,
    rgba(5, 8, 13, 0.28) 100%
  );
}

/* PP plastic panel: keeps the light/dark split, so the scrim is white and the
   copy stays dark. The photo background is already white, so the wash only
   softens the pitch and the player, not the panel colour. */
.saiwei-page .material-panel:last-child {
  padding-left: 70px;
  background-color: #fff;
  color: var(--blue-950);
}

.saiwei-page .material-panel:last-child .material-scrim {
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.44) 0%,
    rgba(255, 255, 255, 0.62) 22%,
    rgba(255, 255, 255, 0.62) 66%,
    rgba(255, 255, 255, 0.52) 84%,
    rgba(255, 255, 255, 0.18) 100%
  );
}

.saiwei-page .material-panel h3 {
  margin: 44px 0 0;
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.saiwei-page .material-panel p {
  max-width: 520px;
  margin: 24px 0 0;
  color: #dbdbdb;
}

.saiwei-page .material-panel:last-child p {
  color: var(--blue-950);
}

.saiwei-page .material-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

/* The ghost buttons now sit on a photo instead of a flat fill, so each panel
   gets a plate behind the label to keep the outline readable. */
.saiwei-page .material-panel:first-child .btn-outline {
  background: rgba(8, 11, 16, 0.62);
}

.saiwei-page .material-panel:last-child .btn-outline {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(17, 24, 39, 0.26);
}

/* Wide screens have room for the copy and the shot to sit side by side, so the
   shot moves into a wide right-hand column and `contain` (rather than the
   `cover` crop) shows the whole guard. Both GIFs carry their subject in the
   middle ~50% of the frame with a flat margin either side (measured: CF x
   24.5-75%, PP x 26.5-72.5%), so capping the copy at 46% keeps every line on the
   flat margin and nothing needs washing out to stay legible.
   Declared after the base rules above so it wins the cascade. */
@media (min-width: 1100px) {
  .saiwei-page .material-bg {
    top: 50%;
    right: 0;
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
    /* 63% of the panel normally, but the panel keeps widening past ~1650px while
       the content area stops at 1350px -- cap the rendered size so the photo
       cannot creep back over the copy on wide screens. */
    width: min(63%, 480px);
    height: 100%;
    object-fit: contain;
    object-position: right center;
  }

  .saiwei-page .material-scrim {
    display: none;
  }

  .saiwei-page .material-panel h3 {
    max-width: 46%;
    font-size: clamp(1.45rem, 2.05vw, 2rem);
    line-height: 0.95;
  }

  .saiwei-page .material-panel p,
  .saiwei-page .material-actions {
    max-width: 46%;
  }
}

.saiwei-page .material-watermark {
  position: absolute;
  z-index: 2;
  right: -20px;
  bottom: -55px;
  font-size: 12rem;
  font-weight: 950;
  line-height: 1;
  color: rgba(255, 255, 255, 0.045);
  letter-spacing: -0.09em;
}

.saiwei-page .material-panel:last-child .material-watermark {
  color: rgba(17, 24, 39, 0.07);
}

.saiwei-page .lab-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 60px;
  align-items: start;
}

.saiwei-page .lab-side {
  position: sticky;
  top: 30px;
}

.saiwei-page .lab-index {
  font-size: 8rem;
  line-height: 0.8;
  color: var(--silver-200);
  font-weight: 950;
  letter-spacing: -0.08em;
}

.saiwei-page .lab-side h2 {
  margin: 20px 0 0;
  font-size: 2.2rem;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--blue-950);
}

.saiwei-page .lab-side p {
  color: var(--muted);
}

.saiwei-page .size-board-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--silver-100);
  border-bottom: 1px solid var(--silver-300);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silver-600);
}

.saiwei-page .size-board-head span,
.saiwei-page .size-row span {
  padding: 16px 20px;
  border-right: 1px solid var(--silver-300);
}

.saiwei-page .size-board-head span:last-child,
.saiwei-page .size-row span:last-child {
  border-right: 0;
}

.saiwei-page .size-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--silver-200);
  background: var(--cream);
  transition: 0.18s ease;
}

.saiwei-page .size-row span:not(:first-child) {
  font-variant-numeric: tabular-nums;
  color: #555555;
}

.saiwei-page .lab-note {
  margin-top: 18px;
  padding: 8px 18px;
  border-top: 1px solid var(--silver-300);
  font-size: 0.82rem;
  color: var(--muted);
}

.saiwei-page .process {
  padding: 60px 0;
  background: #0b0d10;
  color: white;
}

.saiwei-page .process .kicker {
  color: var(--cream);
}

.saiwei-page .process .section-copy {
  margin: 0;
  color: #ebebeb;
}

/* Preview screenshot (2172x724) fills the panel: the ratio matches the image
   so nothing is cropped on wide screens; min-height keeps it legible on
   mobile, where object-fit:cover then crops to the centred laptop. */
.saiwei-page .process-asset {
  position: relative;
  margin-top: 58px;
  /* width must be explicit: with only aspect-ratio, a min-height-driven
     height feeds back into the inline size (220px x 3.0 = 660px wide, which
     overflows a 390px viewport). */
  width: 100%;
  aspect-ratio: 2172 / 724;
  min-height: 220px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.03)
  );
  overflow: hidden;
}

.saiwei-page .process-asset img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* CTA overlaid on the preview image, bottom-right. z-index keeps it above the
   absolutely-positioned img; the 24px inset clears the panel's 20px radius so
   the pill is not clipped by .process-asset { overflow: hidden }. */
.saiwei-page .process-asset-cta {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  box-shadow: 0 14px 34px rgba(11, 13, 16, 0.32);
}

.saiwei-page .track {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.45);
}

.saiwei-page .track-step {
  position: relative;
  padding: 25px 24px 0 0;
  min-height: 130px;
}

.saiwei-page .track-step::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cream);
  top: -6px;
  left: 0;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.14);
}

.saiwei-page .track-step small {
  color: #dbdbdb;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.saiwei-page .track-step b {
  display: block;
  margin-top: 14px;
  font-size: 1.08rem;
  line-height: 1.25;
}

.saiwei-page .process-note {
  margin-top: 30px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  color: #f4f6f8;
  font-size: 0.88rem;
}

.saiwei-page .order-rules {
  padding: 70px 0;
  background: linear-gradient(180deg, var(--silver-100), var(--silver-200));
}

.saiwei-page .order-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 76px;
  align-items: center;
}

.saiwei-page .order-copy h2 {
  margin: 14px 0 0;
  font-size: clamp(2rem, 3vw, 3.3rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
  color: var(--blue-950);
}

.saiwei-page .order-copy p {
  color: #555555;
}

.saiwei-page .moq-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  padding: 14px 18px;
  background: var(--blue-900);
  color: white;
}

.saiwei-page .moq-badge b {
  font-size: 2.5rem;
  line-height: 1;
}

.saiwei-page .moq-badge span {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue-300);
}

.saiwei-page .currency-panel {
  border: 1px solid var(--silver-400);
  background: rgba(255, 255, 255, 0.88);
}

.saiwei-page .currency-head {
  padding: 16px 20px;
  background: var(--blue-900);
  color: white;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.saiwei-page .currency-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  padding: 19px 20px;
  border-bottom: 1px solid var(--silver-300);
}

.saiwei-page .currency-row:last-child {
  border-bottom: 0;
}

.saiwei-page .currency-row span {
  color: var(--silver-600);
  font-size: 0.78rem;
  font-weight: 850;
}

.saiwei-page .currency-row b {
  font-size: 1.5rem;
  color: var(--blue-900);
}

.saiwei-page .gift {
  position: relative;
  padding: 80px 0;
  background: var(--cream-2);
  overflow: hidden;
}

.saiwei-page .gift::before {
  content: "PERSONAL";
  position: absolute;
  right: -30px;
  top: 55px;
  font-size: clamp(7rem, 16vw, 15rem);
  font-weight: 950;
  letter-spacing: -0.08em;
  color: rgba(11, 13, 16, 0.055);
  line-height: 0.8;
}

.saiwei-page .gift-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  align-items: center;
  position: relative;
}

.saiwei-page .gift-visual {
  min-height: 520px;
  background: linear-gradient(145deg, var(--silver-100), var(--silver-300));
  border: 1px solid var(--silver-300);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--blue-900);
}

.saiwei-page .gift-visual span {
  display: block;
  color: var(--silver-600);
  font-size: 0.76rem;
  margin-top: 8px;
}

.saiwei-page .gift-copy h2 {
  margin: 16px 0 0;
  font-size: clamp(2rem, 3.5vw, 3.3rem);
  line-height: 0.94;
  letter-spacing: -0.055em;
  color: var(--blue-950);
}

.saiwei-page .occasion-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.saiwei-page .occasion-list span {
  padding: 9px 12px;
  border: 1px solid var(--silver-300);
  background: var(--cream);
  font-size: 0.76rem;
  font-weight: 800;
  color: #555555;
}

.saiwei-page .audience {
  padding: 80px 0;
  /* Photo backdrop washed with a --cream-2 scrim. The scrim is heavier than the
     0.52 used by .learn on the home page because this section carries text across
     its full width, including over the darker grass/subject half of the photo.
     0.84 is the lightest value that keeps every text node at or above its WCAG AA
     threshold at 1440/1024/768/390px (tightest margin +0.62). */
  background-color: var(--cream-2);
  background-image:
    linear-gradient(rgba(244, 246, 248, 0.84), rgba(244, 246, 248, 0.84)),
    url("../../../../uploads/2026/09/different-players-need-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.saiwei-page .audience-head {
  max-width: 800px;
  margin-bottom: 40px;
}

.saiwei-page .audience-row {
  display: grid;
  grid-template-columns: 120px 1fr 1.25fr auto;
  gap: 26px;
  align-items: center;
  padding: 25px 0;
  border-top: 1px solid var(--silver-300);
}

.saiwei-page .audience-row:last-child {
  border-bottom: 1px solid var(--silver-300);
}

.saiwei-page .audience-row .num {
  /* --silver-400 (#9f9f9f) already fell short on the old flat white (2.65:1) and
     drops further over the washed photo, so step one notch down the silver ramp. */
  color: var(--silver-600);
  font-weight: 900;
}

.saiwei-page .audience-row h3 {
  margin: 0;
  color: var(--blue-950);
  font-size: 1.45rem;
}

.saiwei-page .audience-row p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.saiwei-page .audience-row a {
  color: #0b0d10;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.saiwei-page .regional {
  background: var(--blue-950);
  color: white;
  padding: 80px 0;
}

.saiwei-page .regional-head {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 50px;
}

.saiwei-page .regional .section-copy {
  color: #dbdbdb;
  margin: 0;
}

.saiwei-page .region-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(209, 213, 219, 0.4);
}

.saiwei-page .region {
  padding: 34px;
  border-right: 1px solid rgba(209, 213, 219, 0.35);
  min-height: 430px;
  display: flex;
  flex-direction: column;
}

.saiwei-page .region:last-child {
  border-right: 0;
}

.saiwei-page .region-code {
  color: #c7ff2e;
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.saiwei-page .regional .kicker {
  color: #c7ff2e;
}

.saiwei-page .region h3 {
  margin: 24px 0 0;
  font-size: 1.6rem;
  line-height: 1.15;
}

.saiwei-page .region p {
  color: #dbdbdb;
  font-size: 0.9rem;
}

.saiwei-page .region-stats {
  margin-top: auto;
  border-top: 1px solid rgba(209, 213, 219, 0.35);
}

.saiwei-page .region-stat {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(209, 213, 219, 0.18);
  font-size: 0.9rem;
}

.saiwei-page .region-stat span {
  color: #afafaf;
}

.saiwei-page .region-stat b {
  text-align: right;
}

.saiwei-page .regional-link {
  display: inline-flex;
  margin-top: 26px;
  color: #2563eb;
  font-size: 0.8rem;
  font-weight: 900;
}

.saiwei-page .faq {
  padding: 80px 0;
  background: var(--cream);
}

.saiwei-page .faq-grid {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 70px;
  align-items: start;
}

.saiwei-page .faq-side {
  position: sticky;
  top: 30px;
}

.saiwei-page .faq-side p {
  color: var(--muted);
}

.saiwei-page .faq-list {
  border-top: 1px solid var(--silver-300);
}

.saiwei-page .faq-row {
  border-bottom: 1px solid var(--silver-300);
}

.saiwei-page .faq-row summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 24px 15px;
  color: var(--blue-950);
  font-size: 1.06rem;
  font-weight: 850;
}

.saiwei-page .faq-row summary::-webkit-details-marker {
  display: none;
}

.saiwei-page .faq-row summary svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--silver-600);
  stroke-width: 1.8;
  transition: transform 0.2s ease;
  flex: none;
}

.saiwei-page .faq-row[open] summary svg {
  transform: rotate(180deg);
}

.saiwei-page .faq-answer {
  padding: 0 46px 24px 15px;
}

.saiwei-page .faq-answer p {
  margin: 0;
  color: var(--muted);
}

.saiwei-page .faq-answer a {
  color: #2563eb;
  text-decoration: underline;
}

.saiwei-page .guides {
  padding: 94px 0;
  background: var(--silver-100);
}

.saiwei-page .guides-head {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: end;
  margin-bottom: 34px;
}

.saiwei-page .guides-head h2 {
  margin: 0;
  font-size: clamp(2.5rem, 2.89vw, 2.6rem);
  line-height: 1;
  color: var(--blue-950);
}

.saiwei-page .guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--silver-300);
  border-left: 1px solid var(--silver-300);
}

.saiwei-page .guide-link {
  min-height: 99px;
  padding: 22px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  background: var(--cream);
  border-right: 1px solid var(--silver-300);
  border-bottom: 1px solid var(--silver-300);
  transition: 0.18s ease;
}

.saiwei-page .guide-link:hover {
  background: var(--blue-100);
}

.saiwei-page .guide-link b {
  display: block;
  color: var(--blue-950);
  line-height: 1.25;
}

.saiwei-page .guide-link small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.45;
}

.saiwei-page .guide-link svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--blue-700);
  stroke-width: 1.8;
  flex: none;
}

.saiwei-page .final-cta {
  position: relative;
  background: linear-gradient(125deg, #0b0d10, #272727);
  color: white;
  padding: 118px 0;
  overflow: hidden;
}

.saiwei-page .final-cta::before {
  content: "SAIWEI";
  position: absolute;
  right: -20px;
  bottom: -40px;
  font-size: 18vw;
  font-weight: 950;
  line-height: 0.8;
  letter-spacing: -0.09em;
  color: rgba(255, 255, 255, 0.05);
}

.saiwei-page .final-grid {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  gap: 70px;
  align-items: end;
  position: relative;
}

.saiwei-page .final-cta h2 {
  margin: 14px 0 0;
  font-size: clamp(2.5rem, 5vw, 3.3rem);
  line-height: 0.88;
  letter-spacing: -0.06em;
}

.saiwei-page .final-copy p {
  max-width: 670px;
  color: #ebebeb;
  font-size: 1.05rem;
}

.saiwei-page .final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.saiwei-page .final-meta {
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  padding-left: 30px;
  color: #dbdbdb;
  font-size: 0.78rem;
}

.saiwei-page .site-footer {
  background: var(--blue-950);
  color: white;
  padding: 55px 0 25px;
}

.saiwei-page .footer-grid {
  width: var(--content);
  margin: auto;
  display: grid;
  grid-template-columns: 1.5fr 0.7fr 0.7fr;
  gap: 50px;
}

.saiwei-page .footer-brand p {
  max-width: 430px;
  color: #afafaf;
  font-size: 0.88rem;
}

.saiwei-page .footer-col h2 {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-300);
}

.saiwei-page .footer-col a {
  display: block;
  margin: 9px 0;
  color: #dbdbdb;
  font-size: 0.86rem;
}

.saiwei-page .footer-meta {
  width: var(--content);
  margin: 34px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(209, 213, 219, 0.25);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #8b8b8b;
  font-size: 0.68rem;
}

@media (max-width: 1180px) {
  .saiwei-page .desktop-nav {
    display: none;
  }
}

@media (max-width: 1180px) {
  .saiwei-page .menu-btn {
    display: grid;
    place-items: center;
  }
}

@media (max-width: 1180px) {
  .saiwei-page .header-inner {
    grid-template-columns: auto 1fr auto auto;
  }
}

@media (max-width: 1180px) {
  .saiwei-page .header-inner .header-cta {
    justify-self: end;
  }
}

@media (max-width: 1180px) {
  .saiwei-page .hero-spec {
    display: none;
  }
}

/* 901-1180px: the copy is a fixed 720px, so it reaches much further across the
   photo than on desktop. Deepen the scrim so the text keeps AA contrast over
   the bright grass and the player's white kit. */
@media (max-width: 1180px) {
  .saiwei-page .hero-scrim {
    background:
      linear-gradient(
        180deg,
        rgba(6, 10, 8, 0.42) 0%,
        rgba(6, 10, 8, 0.1) 28%,
        rgba(6, 10, 8, 0.22) 66%,
        rgba(6, 10, 8, 0.5) 100%
      ),
      linear-gradient(
        90deg,
        rgba(6, 10, 8, 0.88) 0%,
        rgba(6, 10, 8, 0.76) 44%,
        rgba(6, 10, 8, 0.5) 76%,
        rgba(6, 10, 8, 0.2) 100%
      );
  }
}

@media (max-width: 1180px) {
  .saiwei-page .lab-grid,
  .saiwei-page .faq-grid {
    grid-template-columns: 280px 1fr;
  }
}

/* Below 900px the copy spans the full width, so the scrim becomes a flat
   overlay and the photo is re-framed on the guards and ball. */
@media (max-width: 900px) {
  .saiwei-page .hero {
    min-height: 580px;
  }
}

@media (max-width: 900px) {
  .saiwei-page .hero-bg img {
    object-position: 68% center;
  }
}

@media (max-width: 900px) {
  .saiwei-page .hero-scrim {
    background: linear-gradient(
      180deg,
      rgba(6, 10, 8, 0.88) 0%,
      rgba(6, 10, 8, 0.72) 55%,
      rgba(6, 10, 8, 0.88) 100%
    );
  }
}

@media (max-width: 900px) {
  .saiwei-page .hero-grid {
    padding: 52px 0 58px;
  }
}

@media (max-width: 900px) {
  .saiwei-page .guard-set {
    transform: scale(0.9);
  }
}

@media (max-width: 900px) {
  .saiwei-page .fact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .saiwei-page .fact:nth-child(2) {
    border-right: 0;
  }
}

@media (max-width: 900px) {
  .saiwei-page .fact:nth-child(3) {
    border-left: 1px solid var(--silver-300);
    border-top: 1px solid var(--silver-300);
  }
}

@media (max-width: 900px) {
  .saiwei-page .fact:nth-child(4) {
    border-top: 1px solid var(--silver-300);
    border-right: 0;
  }
}

@media (max-width: 900px) {
  .saiwei-page .answer-grid,
  .saiwei-page .studio-head,
  .saiwei-page .material-intro,
  .saiwei-page .process-head,
  .saiwei-page .order-grid,
  .saiwei-page .gift-grid,
  .saiwei-page .regional-head,
  .saiwei-page .final-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

@media (max-width: 900px) {
  .saiwei-page .studio-grid,
  .saiwei-page .material-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .saiwei-page .material-panel:first-child {
    border-right: 0;
    border-bottom: 1px solid rgba(209, 213, 219, 0.28);
  }
}

@media (max-width: 900px) {
  .saiwei-page .material-panel:first-child,
  .saiwei-page .material-panel:last-child {
    padding: 52px 28px;
  }
}

@media (max-width: 900px) {
  /* minmax(0,1fr) not 1fr: a bare 1fr track floors at min-content, so a wide
     fixed-width child (e.g. .size-row's 560px min-width) stretched the track
     past the viewport and the surplus was clipped by .saiwei-page's
     overflow-x:hidden instead of scrolling inside the board. */
  .saiwei-page .lab-grid,
  .saiwei-page .faq-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
}

@media (max-width: 900px) {
  .saiwei-page .lab-side,
  .saiwei-page .faq-side {
    position: static;
  }
}

@media (max-width: 900px) {
  .saiwei-page .track {
    grid-template-columns: 1fr;
    border-top: 0;
  }
}

@media (max-width: 900px) {
  .saiwei-page .track-step {
    min-height: auto;
    padding: 18px 0 18px 30px;
    border-left: 1px solid rgba(255, 255, 255, 0.45);
  }
}

@media (max-width: 900px) {
  .saiwei-page .track-step::before {
    top: 25px;
    left: -6px;
  }
}

@media (max-width: 900px) {
  .saiwei-page .audience-row {
    grid-template-columns: 64px 1fr;
    gap: 12px 20px;
  }
}

@media (max-width: 900px) {
  .saiwei-page .audience-row p,
  .saiwei-page .audience-row a {
    grid-column: 2;
  }
}

@media (max-width: 900px) {
  .saiwei-page .region-board {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .saiwei-page .region {
    border-right: 0;
    border-bottom: 1px solid rgba(209, 213, 219, 0.35);
    min-height: auto;
  }
}

@media (max-width: 900px) {
  .saiwei-page .region:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 900px) {
  .saiwei-page .guide-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .saiwei-page .final-meta {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    padding: 20px 0 0;
  }
}

@media (max-width: 640px) {
  .saiwei-page {
    --content: min(calc(100% - 28px), 1350px);
  }
}

@media (max-width: 640px) {
  .saiwei-page .header-inner {
    min-height: 68px;
    grid-template-columns: auto 1fr auto;
  }
}

@media (max-width: 640px) {
  .saiwei-page .header-inner .header-cta {
    display: none;
  }
}

@media (max-width: 640px) {
  .saiwei-page .mobile-menu {
    top: 68px;
  }
}

@media (max-width: 640px) {
  .saiwei-page .brand {
    font-size: 0.8rem;
  }
}

@media (max-width: 640px) {
  .saiwei-page .brand-mark {
    width: 31px;
    height: 31px;
  }
}

@media (max-width: 640px) {
  .saiwei-page .hero {
    min-height: 520px;
  }
}

@media (max-width: 640px) {
  .saiwei-page .display {
    font-size: clamp(2.4rem, 11vw, 5rem);
  }
}

@media (max-width: 640px) {
  .saiwei-page .hero-actions {
    display: grid;
  }
}

@media (max-width: 640px) {
  .saiwei-page .hero-actions .btn {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .saiwei-page .fact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .saiwei-page .fact,
  .saiwei-page .fact:first-child,
  .saiwei-page .fact:nth-child(2),
  .saiwei-page .fact:nth-child(3),
  .saiwei-page .fact:nth-child(4) {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid var(--silver-300);
  }
}

@media (max-width: 640px) {
  .saiwei-page .answer-strip {
    padding: 40px 0;
  }
}

@media (max-width: 640px) {
  .saiwei-page .answer-grid {
    gap: 18px;
  }
}

@media (max-width: 640px) {
  .saiwei-page .answer-grid p {
    font-size: 1.18rem;
  }
}

@media (max-width: 640px) {
  .saiwei-page .studio,
  .saiwei-page .size-lab,
  .saiwei-page .audience,
  .saiwei-page .faq {
    padding: 60px 0;
  }
}

@media (max-width: 640px) {
  .saiwei-page .design-canvas {
    min-height: 520px;
  }
}

@media (max-width: 640px) {
  .saiwei-page .design-row {
    grid-template-columns: 50px 1fr;
    padding: 20px 15px;
    gap: 14px;
  }
}

@media (max-width: 640px) {
  .saiwei-page .material-intro {
    padding: 40px 0 38px;
  }
}

@media (max-width: 640px) {
  .saiwei-page .material-panel {
    min-height: 430px;
  }
}

@media (max-width: 640px) {
  .saiwei-page .size-board {
    overflow-x: auto;
  }
}

@media (max-width: 640px) {
  .saiwei-page .size-board-head,
  .saiwei-page .size-row {
    min-width: 560px;
  }
}

@media (max-width: 640px) {
  .saiwei-page .lab-index {
    font-size: 6rem;
  }
}

@media (max-width: 640px) {
  .saiwei-page .process,
  .saiwei-page .regional,
  .saiwei-page .final-cta {
    padding: 80px 0;
  }
}

@media (max-width: 640px) {
  .saiwei-page .order-rules,
  .saiwei-page .gift,
  .saiwei-page .guides {
    padding: 50px 0;
  }
}

@media (max-width: 640px) {
  .saiwei-page .currency-row {
    grid-template-columns: 56px 1fr auto;
    padding: 16px 14px;
  }
}

@media (max-width: 640px) {
  .saiwei-page .gift-visual {
    min-height: 360px;
  }
}

@media (max-width: 640px) {
  .saiwei-page .audience-row {
    grid-template-columns: 42px 1fr;
  }
}

@media (max-width: 640px) {
  .saiwei-page .guide-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .saiwei-page .guides-head {
    display: block;
  }
}

@media (max-width: 640px) {
  .saiwei-page .guides-head .kicker {
    margin-top: 14px;
  }
}

@media (max-width: 640px) {
  .saiwei-page .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 640px) {
  .saiwei-page .footer-meta {
    display: block;
  }
}

@media (max-width: 640px) {
  .saiwei-page .footer-meta span {
    display: block;
    margin-top: 6px;
  }
}

@media (max-width: 640px) {
  .saiwei-page .mobile-sticky {
    display: flex;
    position: fixed;
    z-index: 60;
    left: 14px;
    right: 14px;
    bottom: 14px;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    background: var(--blue-700);
    color: #0b0d10;
    font-size: 0.8rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 15px 35px rgba(17, 24, 39, 0.34);
  }
}

@media (max-width: 640px) {
  .saiwei-page .site-footer {
    padding-bottom: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .saiwei-page * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

.saiwei-page .answer-strip,
.saiwei-page .studio-grid,
.saiwei-page .material-split,
.saiwei-page .size-board,
.saiwei-page .lab-note,
.saiwei-page .track,
.saiwei-page .currency-panel,
.saiwei-page .region-board,
.saiwei-page .faq-list {
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--soft-shadow-sm);
}

.saiwei-page .mock-photo,
.saiwei-page .process-asset,
.saiwei-page .gift-visual,
.saiwei-page .guide-link {
  border-radius: 20px;
  overflow: hidden;
}

.saiwei-page .process-note,
.saiwei-page .occasion-list span,
.saiwei-page .audience-row,
.saiwei-page .final-meta {
  border-radius: 16px;
}

.saiwei-page .spec-row,
.saiwei-page .size-row,
.saiwei-page .currency-row,
.saiwei-page .region-stat,
.saiwei-page .faq-row {
  border-color: var(--soft-border) !important;
}

.saiwei-page .fact-rail,
.saiwei-page .studio-grid,
.saiwei-page .material-split,
.saiwei-page .size-board,
.saiwei-page .track,
.saiwei-page .currency-panel,
.saiwei-page .region-board,
.saiwei-page .faq-list,
.saiwei-page .guide-link {
  border-color: var(--soft-border) !important;
}

@media (max-width: 780px) {
  .saiwei-page section:not(.answer-strip):not(.fact-rail):not(.hero) {
    padding: 50px 0 !important;
  }
}

/* Table/board scroll restoration -------------------------------------------
   The batched rule earlier in this file gives .size-board (and friends)
   `overflow: hidden` so their rounded corners clip. It sits AFTER the
   max-width:640px `overflow-x: auto` rule with equal specificity, so it won
   every conflict and the size board's hidden columns were unreachable. These
   declarations come last, so they win: the board keeps its corner clipping on
   the vertical axis and can be scrolled sideways to reveal the rest. */
.saiwei-page .size-board {
  overflow-x: auto;
  overflow-y: hidden;
}

/* Ultra pointer strip under the 2-panel material split */
.saiwei-page .material-note {width:var(--content);margin:18px auto 0;color:var(--muted);font-size:.9rem}
.saiwei-page .material-note a {color:#0B0D10;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.saiwei-page .material-note a:hover {color:#2563EB}