/* /gear uses the same type, color, glass and 1200px grid as the rest of the site. */
.order-page main {
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}
.order-hero {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  padding:80px 0 48px;
  color:var(--text);
}
.order-copy {max-width:520px}
.order-kicker {
  display:inline-flex;
  margin:0 0 26px;
  padding:7px 13px;
  border:1px solid var(--stroke);
  border-radius:999px;
  background:var(--glass);
  color:var(--subtext);
  font-size:12px;
  font-weight:500;
  letter-spacing:.04em;
}
.order-page .order-copy h1 {
  margin:0 0 26px;
  color:var(--text);
  font-size:clamp(45px,4.8vw,66px);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.045em;
}
.order-square {display:inline-block;width:.17em;height:.17em;margin-left:.16em;background:#ff5420;vertical-align:baseline}
.order-subtitle {max-width:410px;margin:0 0 29px;color:var(--subtext);font-size:16px;line-height:1.9}
.order-scan-block {display:flex;align-items:center;gap:16px}
.order-qr {
  display:flex;
  flex:0 0 200px;
  align-items:center;
  justify-content:center;
  width:200px;
  height:200px;
  padding:8px;
  overflow:hidden;
  border:1px solid #dde1e6;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px #0000001f;
}
.order-qr img {width:100%;height:100%;object-fit:cover;border-radius:8px;filter:none;transform:none}
.order-qr-label strong {display:block;color:var(--text);font-size:18px;font-weight:700;line-height:1.4;letter-spacing:-.02em}
.order-qr-label p {margin:4px 0 0;color:var(--subtext);font-size:14px;line-height:1.6}
.order-qr-label>span {display:block;margin-top:2px;color:var(--subtext);font-size:12px;line-height:1.6}
.order-frame {
  height:400px;
  margin:0;
  overflow:hidden;
  border:1px solid #ffffff30;
  border-radius:26px;
  background:#17222e;
  box-shadow:0 28px 70px #0005;
}
.order-frame img {width:100%;height:100%;object-fit:cover;object-position:62% center}
.order-page.theme-light .order-frame {border-color:rgba(25,40,60,.13);box-shadow:0 18px 50px #20314a1a}
.order-process {padding:36px 0 72px}
.order-process-title>p {margin:0 0 13px;color:var(--brand-soft);font-size:12px;font-weight:700;letter-spacing:.12em}
.order-page .order-process-title h2 {margin:0;color:var(--text);font-size:30px;font-weight:800;line-height:1.4;letter-spacing:-.025em}
.order-benefits {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 22px;margin:22px 0 26px;padding:0;list-style:none}
.order-benefits li {display:flex;align-items:center;gap:10px;min-width:0}
.order-benefits svg {width:24px;height:24px;flex:0 0 24px;color:#ff5420}
.order-benefits strong {display:block;color:var(--text);font-size:14px;font-weight:600;line-height:1.5}
.order-benefits span {display:block;margin-top:2px;color:var(--subtext);font-size:12px;line-height:1.6}
.order-rail {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.order-rail li {
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  column-gap:8px;
  min-width:0;
  padding:12px 12px 14px;
  border:1px solid var(--stroke);
  border-radius:16px;
  background:linear-gradient(150deg,var(--glass-strong),var(--glass));
}
.order-rail-num {color:var(--brand-soft);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.order-rail-icon {justify-self:end;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--stroke);border-radius:8px;background:var(--glass);color:var(--subtext)}
.order-rail-icon svg {width:15px;height:15px}
.order-rail-name {grid-column:1 / -1;margin-top:10px;color:var(--text);font-size:14px;font-weight:600;line-height:1.45}
.order-scenes {display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
.order-scene-card {
  margin:0;
  padding:13px 13px 18px;
  border:1px solid var(--stroke);
  border-radius:21px;
  background:linear-gradient(150deg,var(--glass-strong),var(--glass));
  box-shadow:var(--soft-shadow);
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.order-scene-card:hover {transform:translateY(-5px);border-color:#ff54205c;box-shadow:0 22px 55px #0003}
.order-scene-photo {aspect-ratio:1.55;overflow:hidden;border-radius:12px;background:var(--glass)}
.order-scene-photo img {width:100%;height:100%;object-fit:cover;object-position:center 35%}
.order-scene-card figcaption {margin:14px 6px 0;color:var(--text);font-size:18px;font-weight:700;line-height:1.45;letter-spacing:-.02em}
.order-scene-card figcaption span {margin-right:8px;color:var(--brand-soft);font-variant-numeric:tabular-nums}
.order-image-note {margin:18px 0 0;color:var(--subtext);font-size:12px;line-height:1.7;text-align:right}
.order-resorts {margin:0 0 18px;color:var(--subtext);font-size:14px;line-height:1.7}
.order-faq {margin-top:36px}
.order-prices .order-price-desc {margin:8px 0 0;color:var(--subtext);font-size:14px;font-weight:400;line-height:1.7}
.order-prices .order-price-amount {margin:10px 0 0;color:#ff5420;font-size:18px;font-weight:700;line-height:1.4}
.order-page .order-faq h2 {margin:0 0 16px;color:var(--text);font-size:30px;font-weight:800;line-height:1.4;letter-spacing:-.025em}
.order-faq dl {display:grid;gap:12px;margin:0}
.order-faq dl>div {padding:16px 18px;border:1px solid var(--stroke);border-radius:16px;background:linear-gradient(150deg,var(--glass-strong),var(--glass))}
.order-faq dt {color:var(--text);font-size:16px;font-weight:700;line-height:1.45}
.order-faq dd {margin:6px 0 0;color:var(--subtext);font-size:14px;line-height:1.7}
.order-qr-dialog {position:fixed;width:min(92vw,500px);max-height:90svh;overflow:auto;padding:31px 30px 24px;border:1px solid #d7dde5;border-radius:20px;background:#fff;color:#17202d;box-shadow:0 25px 100px #0008;text-align:center}
.order-qr-dialog::backdrop {background:#01060ce0;backdrop-filter:blur(9px)}
.order-qr-dialog h2 {margin:5px 0 8px;font-size:25px;line-height:1.4;letter-spacing:0}
.order-qr-dialog p {margin:0 10px 10px;color:#596575;font-size:14px}
.order-qr-dialog>img {width:100%;height:auto;max-height:60svh;margin:auto;object-fit:contain;filter:none;transform:none}
.order-qr-close {position:absolute;top:8px;right:10px;width:36px;height:36px;border:0;border-radius:50%;background:#f0f2f5;color:#263244;font-size:26px;line-height:1;cursor:pointer}
.order-original-code {display:inline-block;margin-top:13px;border-bottom:1px solid #b14a23;color:#823110;font-size:14px}
.order-dialog-open {overflow:hidden}
@media(max-width:1100px) {
  .order-hero {gap:35px;padding-top:64px}
  .order-frame {height:360px}
}
@media(max-width:900px) {
  .order-hero {gap:26px}
  .order-frame {height:320px}
  .order-page .order-copy h1 {font-size:48px}
  .order-page .order-process-title h2 {font-size:27px}
  .order-rail {grid-template-columns:1fr}
  .order-rail li {grid-template-columns:auto auto 1fr;align-items:center;padding:12px 14px}
  .order-rail-name {grid-column:auto;margin-top:0}
}
@media(max-width:720px) {
  .order-page main {padding:0 20px}
  .order-hero {grid-template-columns:1fr;gap:28px;padding:36px 0 8px}
  .order-kicker {margin-bottom:16px}
  .order-page .order-copy h1 {margin-bottom:16px;font-size:36px}
  .order-subtitle {margin-bottom:22px;font-size:15px;line-height:1.8}
  .order-scan-block {flex-direction:column;align-items:flex-start;gap:12px}
  .order-qr {flex-basis:auto;width:min(68vw,240px);height:auto;aspect-ratio:1}
  .order-qr-label strong {font-size:16px}
  .order-frame {height:220px;border-radius:20px}
  .order-process {padding:40px 0 56px}
  .order-process-title>p {margin-bottom:10px}
  .order-page .order-process-title h2,.order-page .order-faq h2,.order-page .order-prices h2 {font-size:25px}
  .order-benefits {grid-template-columns:1fr 1fr;gap:18px 16px;margin:20px 0 22px}
  .order-scenes {grid-template-columns:1fr;gap:16px}
  .order-scene-card {padding:11px 11px 16px;border-radius:18px}
  .order-scene-photo {aspect-ratio:16 / 10}
  .order-scene-card figcaption {font-size:16px}
  .order-image-note {text-align:center}
  .order-qr-dialog {padding:35px 18px 20px}
  .order-qr-dialog>img {max-height:57svh}
}
@media(prefers-reduced-motion:reduce) {
  .order-scene-card {transition:none}
  .order-scene-card:hover {transform:none}
}
.order-page.motion-off .order-scene-card:hover {transform:none}