.customer-page {
  --ink: #111413;
  --yellow: #f7d23e;
  --paper: #f2f1ec;
  --line: #d4d4cb;
  --muted: #59615d;
  background: var(--paper);
  color: var(--ink);
}

.customer-page .container { max-width: 1180px; padding-top: 0; }
.customer-page .topbar { border: 0; background: #111413; }
.customer-page .topbar-inner { max-width: 1180px; min-height: 72px; }
.customer-page .brand { font: 900 25px/1 Arial, sans-serif; letter-spacing: -.075em; }
.customer-page .brand-mark { display: inline-block; margin-left: 3px; font: 700 9px/1 Arial, sans-serif; vertical-align: top; letter-spacing: 0; }
.customer-page .topbar-label { color: #faf9f3; font: 800 11px/1.2 Arial, sans-serif; letter-spacing: .13em; }
.customer-page .topbar-label span { color: #979c96; }

.customer-page .campaign-hero { min-height: 585px; background: #111413; }
.customer-page .campaign-hero::after { display: none; }
.customer-page .campaign-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  align-items: stretch;
  width: 100%;
  max-width: 1180px;
  min-height: 585px;
  padding: 0 24px;
  text-align: left;
}
.customer-page .campaign-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 54px 40px 52px 0;
}
.customer-page .campaign-english {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 29px;
  color: #efefe8;
  font: 800 11px/1.3 Arial, sans-serif;
  letter-spacing: .12em;
}
.customer-page .hero-signal { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px #f7d23e24; }
.customer-page .hero-edition { color: var(--yellow); }
.customer-page .campaign-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(54px, 5.5vw, 78px);
  font-weight: 900;
  line-height: 1.11;
  letter-spacing: -.075em;
}
.customer-page .campaign-hero h1 em { color: var(--yellow); font-style: normal; }
.customer-page .campaign-slogan { margin: 26px 0 27px; color: #c9cfca; font-size: 20px; font-weight: 600; line-height: 1.55; }
.customer-page .campaign-cta { justify-content: space-between; min-width: 218px; min-height: 52px; border-radius: 0; padding: 14px 18px; font-size: 14px; font-weight: 850; }
.customer-page .campaign-cta span { margin-left: 25px; font: 500 22px/1 Arial, sans-serif; }
.customer-page .campaign-cta:hover, .customer-page .edition-action .btn:hover { background: #ffe36c; border-color: #ffe36c; }
.customer-page .campaign-hero-foot { position: static; display: flex; justify-content: space-between; width: 100%; margin-top: auto; padding-top: 52px; transform: none; color: #a7aea8; font: 700 10px/1.3 Arial, sans-serif; letter-spacing: .12em; }
.customer-page .campaign-photo-wrap { position: relative; min-height: 585px; overflow: hidden; }
.customer-page .campaign-photo-wrap::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, #11141330, transparent 24%); pointer-events: none; }
.customer-page .campaign-hero-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.customer-page .campaign-photo-tag { position: absolute; z-index: 2; right: 0; bottom: 29px; display: flex; align-items: center; gap: 25px; padding: 11px 14px; background: var(--yellow); color: #111413; font: 800 10px/1.2 Arial, sans-serif; letter-spacing: .07em; }
.customer-page .campaign-photo-tag b { border-left: 1px solid #11141388; padding-left: 12px; }

.customer-page .campaign-intro { display: flex; align-items: flex-start; gap: 38px; padding: 35px 0 31px; border-bottom: 1px solid var(--line); }
.customer-page .intro-index { flex: 0 0 210px; color: #707872; font: 800 11px/1.5 Arial, sans-serif; letter-spacing: .11em; }
.customer-page .intro-index b { display: block; margin-top: 4px; color: var(--ink); font-size: 21px; letter-spacing: -.02em; }
.customer-page .campaign-intro p { max-width: none; margin: 0; font-size: clamp(18px, 1.9vw, 23px); font-weight: 600; line-height: 1.55; letter-spacing: -.04em; }
.customer-page .campaign-intro strong { background: linear-gradient(transparent 67%, #f7d23e99 67%); }
.customer-page .journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.customer-page .journey-step { display: flex; align-items: flex-start; gap: 14px; min-height: 124px; padding: 29px 23px; }
.customer-page .journey-step:first-child { padding-left: 0; }
.customer-page .journey-step + .journey-step { border-left: 1px solid var(--line); }
.customer-page .journey-step > span { color: #a1a8a1; font: 900 28px/1 Arial, sans-serif; letter-spacing: -.06em; }
.customer-page .journey-step b { display: block; margin-bottom: 3px; font-size: 16px; font-weight: 850; }
.customer-page .journey-step p { margin: 0; color: var(--muted); font-size: 13px; }

.customer-page .current-edition { padding: 55px 0 63px; border-bottom: 1px solid var(--line); }
.customer-page .edition-heading { display: flex; justify-content: space-between; margin-bottom: 18px; padding-bottom: 15px; border-bottom: 2px solid var(--ink); color: var(--ink); font: 850 11px/1.2 Arial, sans-serif; letter-spacing: .12em; }
.customer-page .edition-heading span:last-child { color: #717973; }
.customer-page .edition-content { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 65px; align-items: start; }
.customer-page .edition-story { min-width: 0; padding-top: 15px; }
.customer-page .edition-label { display: inline-block; width: fit-content; margin: 0 0 23px; padding: 7px 10px; background: #111413; color: var(--yellow); font: 800 10px/1.2 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.customer-page .edition-content h2 { margin: 0 0 18px; font-size: clamp(35px, 4vw, 53px); font-weight: 900; line-height: 1.12; letter-spacing: -.06em; overflow-wrap: anywhere; }
.customer-page .edition-description { margin: 0 0 40px; color: #505953; font-size: 16px; line-height: 1.7; }
.customer-page .edition-poster { display: inline-flex; align-items: center; gap: 12px; margin: -17px 0 28px; padding: 8px 14px 8px 8px; border: 1px solid var(--line); background: #fff; text-decoration: none; font-size: 12px; font-weight: 800; }
.customer-page .edition-poster img { display: block; width: 43px; height: 55px; object-fit: cover; }
.customer-page .edition-poster b { margin-left: 9px; font: 500 17px/1 Arial, sans-serif; }
.customer-page .edition-poster:hover { border-color: var(--ink); }
.customer-page .edition-date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin: 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink); }
.customer-page .edition-date span { flex-basis: 100%; color: #797f79; font: 800 10px/1.2 Arial, sans-serif; letter-spacing: .1em; }
.customer-page .edition-date b { font-size: 18px; font-weight: 850; }
.customer-page .edition-date small { color: var(--muted); font-size: 13px; }
.customer-page .edition-prize-block { min-width: 0; padding: 19px; border: 1px solid #d7d8d0; background: #fff; box-shadow: 8px 8px 0 #e4e4da; }
.customer-page .edition-prize-title { display: flex; justify-content: space-between; margin: 0 0 13px; color: var(--ink); font: 850 11px/1.2 Arial, sans-serif; letter-spacing: .07em; }
.customer-page .edition-prize-title span { color: #929992; }
.customer-page .edition-prizes { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 7px; padding: 0; border: 0; }
.customer-page .edition-prize-item { min-width: 0; display: flex; flex-direction: column; gap: 0; padding: 8px; background: #f3f4ef; }
.customer-page .edition-prize-item:first-child { background: #f9f1d1; }
.customer-page .edition-prize-item img, .customer-page .prize-placeholder { width: 100%; aspect-ratio: 1; border: 0; background: #fff; object-fit: contain; }
.customer-page .prize-placeholder { background: #1d211f; color: var(--yellow); }
.customer-page .edition-prize-item span { margin-top: 10px; color: #777f78; font-size: 10px; }
.customer-page .edition-prize-item b { margin-top: 2px; font-size: 12px; font-weight: 850; line-height: 1.35; }
.customer-page .edition-prize-item:first-child b { font-size: 15px; }
.customer-page .edition-prize-note { margin: 13px 0 0; text-align: right; color: #777f78; font-size: 11px; }

.customer-page .customer-tools { margin: 18px 0 14px; }
.customer-page .customer-tools .btn { border-radius: 0; }
.customer-page .notice { margin: 23px 0 0; padding: 19px 23px; border-left: 5px solid var(--yellow); background: #191d1a; color: #fff; }
.customer-page .notice strong { font-size: 17px; }
.customer-page .notice span { color: #c9d0c9; }
.customer-page .announcement { margin: 0; padding: 21px 23px; border: 1px solid var(--line); border-top: 0; background: #fff; }
.customer-page .announcement .eyebrow { color: #797e77; }
.customer-page .announcement b { font-size: 16px; }
.customer-page .announcement .btn { white-space: nowrap; }
.customer-page .btn { border-radius: 0; }
.customer-page .section { margin-top: 36px; padding-top: 32px; }
.customer-page .section-head h2 { font-size: 27px; font-weight: 850; letter-spacing: -.045em; }
.customer-page .section-head p { max-width: 650px; line-height: 1.55; }
.customer-page .plain-panel { padding: 25px; }
.customer-page .login { max-width: 580px; margin: 45px auto 65px; padding: 30px; }
.customer-page .login h2 { font-size: 28px; }
.customer-page .beverage-coupon { border-left-color: var(--yellow); }
.customer-page .photo-card { padding: 10px; }
.customer-page .photo-card.mission-selected { border: 3px solid var(--yellow); box-shadow: 0 0 0 2px #111413; }
.customer-page .capture-panel { display: grid; gap: 18px; }
.customer-page .capture-copy b { display: block; margin-bottom: 5px; font-size: 18px; }
.customer-page .capture-copy p { max-width: 720px; margin: 0; color: var(--muted); line-height: 1.6; }
.customer-page .capture-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.customer-page .capture-actions .btn { min-width: 180px; justify-content: center; }
.customer-page .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
.customer-page .capture-preview { display: grid; grid-template-columns: 94px minmax(0, 1fr); align-items: center; gap: 15px; padding: 12px; border: 1px solid var(--line); background: #f7f7f2; }
.customer-page .capture-preview[hidden] { display: none; }
.customer-page .capture-preview img { display: block; width: 94px; height: 110px; object-fit: cover; background: #dfe1dc; }
.customer-page .capture-preview b, .customer-page .capture-preview span { display: block; }
.customer-page .capture-preview span { margin-top: 5px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.customer-page .mission-guide { margin: 18px 0; padding: 22px; border-left: 5px solid var(--yellow); background: #171b19; color: #fff; }
.customer-page .mission-guide strong { display: block; font-size: 19px; line-height: 1.55; }
.customer-page .mission-guide p { margin: 9px 0 12px; color: #cbd0cc; font-size: 14px; line-height: 1.65; }
.customer-page .mission-guide a { color: var(--yellow); font-weight: 850; }
.customer-page .publication-consent { margin: 16px 0 18px; padding: 18px; border: 2px solid #147f75; background: #fff; }
.customer-page .publication-consent b { display: inline-block; margin-right: 5px; color: #147f75; }
.customer-page .mission-card-grid { margin-top: 15px; }
.customer-page .pilot-note { margin: 18px 0; }

@media (max-width: 800px) {
  .customer-page .campaign-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
  .customer-page .campaign-copy { padding-right: 18px; }
  .customer-page .campaign-hero h1 { font-size: clamp(45px, 6vw, 62px); }
  .customer-page .campaign-slogan { font-size: 17px; }
  .customer-page .edition-content { gap: 28px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .customer-page .edition-prizes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .customer-page .edition-prize-item:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 92px minmax(0, 1fr); align-content: center; column-gap: 12px; }
  .customer-page .edition-prize-item:first-child img, .customer-page .edition-prize-item:first-child .prize-placeholder { grid-row: 1 / 3; }
  .customer-page .edition-prize-item:first-child span { align-self: end; }
  .customer-page .edition-prize-item:first-child b { align-self: start; }
}

@media (max-width: 650px) {
  .customer-page .container { padding: 0 18px 60px; }
  .customer-page .topbar-inner { min-height: 60px; padding: 0 18px; }
  .customer-page .brand { font-size: 22px; }
  .customer-page .topbar-label { font-size: 9px; letter-spacing: .04em; }
  .customer-page .topbar-label span { display: none; }
  .customer-page .campaign-hero { min-height: 598px; }
  .customer-page .campaign-hero-inner { display: block; min-height: 598px; padding: 0 18px; }
  .customer-page .campaign-photo-wrap { position: absolute; inset: 0; min-height: 0; }
  .customer-page .campaign-photo-wrap::before { z-index: 1; background: linear-gradient(180deg, #10131156 0%, #10131108 31%, #101311cc 66%, #101311 100%); }
  .customer-page .campaign-hero-image { object-position: center 29%; }
  .customer-page .campaign-photo-tag { top: 20px; right: 18px; bottom: auto; padding: 8px 10px; font-size: 8px; }
  .customer-page .campaign-copy { position: relative; z-index: 2; justify-content: flex-end; min-height: 598px; padding: 240px 0 24px; }
  .customer-page .campaign-english { margin-bottom: 18px; font-size: 9px; }
  .customer-page .campaign-hero h1 { font-size: clamp(49px, 13vw, 70px); }
  .customer-page .campaign-slogan { margin: 17px 0 22px; color: #ebeee8; font-size: 16px; }
  .customer-page .campaign-cta { width: 100%; min-height: 53px; }
  .customer-page .campaign-hero-foot { padding-top: 23px; font-size: 8px; }
  .customer-page .campaign-intro { display: block; padding: 29px 0; }
  .customer-page .intro-index { display: block; margin-bottom: 17px; }
  .customer-page .intro-index b { display: inline; margin-left: 9px; font-size: 14px; }
  .customer-page .campaign-intro p { font-size: 18px; }
  .customer-page .journey { grid-template-columns: 1fr; }
  .customer-page .journey-step, .customer-page .journey-step:first-child { min-height: 0; padding: 18px 0; }
  .customer-page .journey-step + .journey-step { border-top: 1px solid var(--line); border-left: 0; }
  .customer-page .journey-step > span { width: 36px; font-size: 25px; }
  .customer-page .current-edition { padding: 37px 0 44px; }
  .customer-page .edition-heading { font-size: 9px; }
  .customer-page .edition-content { grid-template-columns: 1fr; gap: 28px; }
  .customer-page .edition-story { padding-top: 2px; }
  .customer-page .edition-label { margin-bottom: 18px; }
  .customer-page .edition-content h2 { font-size: clamp(36px, 10vw, 48px); }
  .customer-page .edition-description { margin-bottom: 24px; }
  .customer-page .edition-prize-block { padding: 12px; box-shadow: 5px 5px 0 #e4e4da; }
  .customer-page .edition-prize-item { padding: 6px; }
  .customer-page .edition-prize-item:first-child { grid-template-columns: 78px minmax(0, 1fr); }
  .customer-page .edition-prize-item b { font-size: 11px; }
  .customer-page .edition-prize-item:first-child b { font-size: 15px; }
  .customer-page .section { margin-top: 27px; padding-top: 24px; }
  .customer-page .section-head h2 { font-size: 23px; }
  .customer-page .notice { padding: 17px; }
  .customer-page .notice strong { font-size: 16px; }
  .customer-page .announcement { align-items: stretch; padding: 17px; }
  .customer-page .announcement .btn { white-space: normal; }
  .customer-page .login { margin: 30px 0 50px; padding: 23px; }
  .customer-page .plain-panel { padding: 20px; }
  .customer-page .capture-actions { display: grid; grid-template-columns: 1fr; }
  .customer-page .capture-actions .btn { width: 100%; min-width: 0; }
  .customer-page .mission-guide { padding: 18px; }
  .customer-page .mission-guide strong { font-size: 17px; }
  .customer-page .publication-consent { align-items: flex-start; padding: 16px; }
  .customer-page .photo-card .actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
  .customer-page .campaign-cta { transition: background .15s ease, border-color .15s ease, transform .15s ease; }
  .customer-page .campaign-cta:hover { transform: translateY(-2px); }
}