:root {
  --xiang-green: #1f5a3c;
  --xiang-green-dark: #153e2b;
  --xiang-lime: #8bbd24;
  --xiang-orange: #df7f17;
  --xiang-ink: #21312a;
  --xiang-muted: #64726b;
  --xiang-paper: #f7f5ef;
  --xiang-line: #d9dfd8;
}

.xiangxiang-order-page {
  background: #fff;
  color: var(--xiang-ink);
  letter-spacing: 0;
}

.xiangxiang-order-page .brand-mark {
  background: var(--xiang-lime);
  color: #153417;
}

.order-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  min-height: min(760px, calc(100vh - 72px));
  padding: 56px 0 72px;
}

.order-kicker,
.section-kicker {
  margin: 0 0 10px;
  color: var(--xiang-orange);
  font-size: 0.9rem;
  font-weight: 800;
}

.order-hero h1 {
  max-width: 10ch;
  margin: 0;
  color: var(--xiang-green-dark);
  font-size: clamp(2.5rem, 5.4vw, 4.8rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.order-lead {
  max-width: 33rem;
  margin: 24px 0 28px;
  color: var(--xiang-muted);
  font-size: 1.08rem;
  line-height: 1.8;
}

.xiangxiang-line-cta {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: 1px solid var(--xiang-green);
  border-radius: 6px;
  background: var(--xiang-green);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.xiangxiang-line-cta:hover,
.xiangxiang-line-cta:focus-visible {
  background: var(--xiang-green-dark);
}

.cta-note {
  margin: 12px 0 0;
  color: var(--xiang-muted);
  font-size: 0.9rem;
}

.order-hero-media {
  margin: 0;
}

.order-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--xiang-line);
  border-radius: 8px;
}

.order-hero-media figcaption {
  margin-top: 10px;
  color: var(--xiang-muted);
  font-size: 0.85rem;
}

.order-steps,
.order-rules,
.order-boundary {
  padding: 72px 0;
}

.order-steps,
.order-boundary {
  background: var(--xiang-paper);
}

.section-inner {
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto;
}

.section-inner h2 {
  margin: 0;
  color: var(--xiang-green-dark);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.25;
  letter-spacing: 0;
}

.order-steps ol,
.rule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 36px 0 0;
  padding: 0;
  border: 1px solid var(--xiang-line);
  background: var(--xiang-line);
  list-style: none;
}

.order-steps li,
.rule-grid > div {
  min-width: 0;
  padding: 26px;
  background: #fff;
}

.order-steps li {
  counter-increment: steps;
}

.order-steps ol {
  counter-reset: steps;
}

.order-steps li::before {
  content: "0" counter(steps);
  display: block;
  margin-bottom: 18px;
  color: var(--xiang-orange);
  font-size: 1.35rem;
  font-weight: 800;
}

.order-steps strong,
.rule-grid strong {
  display: block;
  margin-bottom: 8px;
  color: var(--xiang-green-dark);
  font-size: 1.05rem;
}

.order-steps span,
.rule-grid span {
  display: block;
  color: var(--xiang-muted);
  line-height: 1.65;
}

.rule-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.boundary-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
}

.boundary-inner p:last-child {
  max-width: 47rem;
  margin: 18px 0 0;
  color: var(--xiang-muted);
  line-height: 1.8;
}

.xiangxiang-line-cta.secondary {
  white-space: nowrap;
}

@media (max-width: 800px) {
  .order-hero {
    grid-template-columns: 1fr;
    width: min(100% - 32px, 620px);
    min-height: 0;
    padding: 40px 0 56px;
  }

  .order-hero h1 {
    max-width: 11ch;
    font-size: 2.65rem;
  }

  .order-hero-media {
    order: -1;
  }

  .order-steps,
  .order-rules,
  .order-boundary {
    padding: 52px 0;
  }

  .section-inner {
    width: min(100% - 32px, 620px);
  }

  .order-steps ol,
  .rule-grid,
  .boundary-inner {
    grid-template-columns: 1fr;
  }

  .boundary-inner {
    gap: 28px;
  }

  .xiangxiang-line-cta,
  .xiangxiang-line-cta.secondary {
    width: 100%;
    white-space: normal;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }
}