/* ORDER IN ENGLISH — page layout only (components live in style.css) */

.steps__done-text { word-break: auto-phrase; }

/* ---------- hero ---------- */
.order-hero { padding-block: clamp(40px, 6.1vw, 88px) clamp(64px, 6.1vw, 88px); }
.order-hero__grid { display: grid; gap: 24px; align-items: center; }
.order-hero__text { display: grid; gap: clamp(18px, 1.7vw, 24px); justify-items: start; }
.order-hero__chat { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 0; max-width: 380px; }
.order-hero__chat .bubble { grid-column: 1 / -1; justify-self: start; }
.order-hero__chat .bubble--cyan { grid-column: 2; justify-self: end; }
.order-hero__chat .mascot-badge { grid-area: 2 / 1; align-self: end; width: 84px; margin-left: 7px; }
.order-hero .bubble__en { line-height: 1.3; }
@media (max-width: 767px) {
  .order-hero .lead { font-weight: 500; }
  .order-hero .lead br { display: none; }
  .order-hero .bubble { padding: 12px 18px; }
}
@media (min-width: 1100px) {
  .order-hero__grid { grid-template-columns: 1fr 460px; }
  .order-hero__chat { row-gap: 20px; max-width: none; }
  .order-hero__chat .bubble--cyan { grid-column: 1 / -1; }
  .order-hero__chat .mascot-badge { grid-area: 3 / 1; width: 150px; margin: -40px 0 0; }
}

/* ---------- 5 steps ---------- */
.steps__grid { display: grid; gap: 24px; margin-top: clamp(24px, 3.4vw, 48px); }
.steps__list { display: grid; gap: inherit; }
.steps .phrase-card__en { font-size: 32px; }
.steps__done { background: var(--hot-bg); padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.steps__done-title { font-family: var(--font-display); font-size: clamp(40px, 3.33vw, 48px); line-height: 1.05; color: var(--hot-ink); }
.steps__done-text { font-weight: 700; line-height: 1.7; } /* Figma: ink */
@media (min-width: 768px) {
  .steps__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .steps__list { grid-column: 1 / -1; grid-row: 1 / span 3; grid-template-columns: subgrid; grid-template-rows: subgrid; }
  .steps__done { grid-area: 3 / 2; }
}
@media (min-width: 1100px) {
  .steps__grid { grid-template-columns: repeat(3, 1fr); gap: 48px 28px; }
  .steps__list { grid-row: 1 / span 2; }
  .steps__done { grid-area: 2 / 3; }
}

/* ---------- you might hear ---------- */
.hear__list { margin-top: clamp(24px, 3.4vw, 48px); border-top: 1px solid var(--cream); }
.hear__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 32px; padding-block: 27px; border-bottom: 1px solid var(--cream); }
.hear__en { font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 40px); line-height: 1.1; }
.hear__jp { font-weight: 700; font-size: 18px; line-height: 1.5; }
@media (max-width: 767px) {
  .hear__row { flex-direction: column; align-items: flex-start; padding-block: 18px; }
  .hear__jp { font-size: 14px; opacity: 0.72; }
}

/* ---------- menu words ---------- */
.words__list { display: flex; flex-wrap: wrap; gap: 16px 14px; margin-top: clamp(24px, 3.4vw, 48px); }
.words__list .pill { min-height: 52px; padding: 0 22px; gap: 13px; background: var(--white); font-size: 16px; }
.words__list .pill::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); background: var(--pec-bg); }
.words__list .pill:nth-child(4n+2)::before { background: var(--kindai-bg); }
.words__list .pill:nth-child(4n+3)::before { background: var(--teriyaki-bg); }
.words__list .pill:nth-child(4n)::before { background: var(--hot-bg); }
.words__list .pill__jp { font-size: 14px; opacity: 1; }
.words__list [lang="en"] { letter-spacing: 0.06em; } /* [lang=en] resets tracking globally; Figma chips are tracked */
.words__cta { margin-top: clamp(24px, 2.8vw, 40px); }
@media (max-width: 767px) {
  .words__list { gap: 9px; }
  .words__list .pill { min-height: 40px; padding: 0 14px; gap: 10px; font-size: 13px; }
  .words__list .pill::before { width: 10px; height: 10px; }
  .words__list .pill__jp { font-size: 11px; opacity: 0.7; }
}