body { margin: 0; }
.ob { position: relative; padding: 28px 0 64px; }
.ob .lamp { width: 760px; height: 600px; left: 50%; top: -220px; translate: -50% 0; }
.ob__head { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; margin: 30px 0 34px; }
.ob__t { font: 700 52px/1 var(--font-display); letter-spacing: -.04em; margin: 0; }
.ob__p { font-size: 17px; line-height: 27px; color: var(--ink-muted); max-width: 36rem; }
.ob__p strong { color: var(--ink); }
.ob__steps { display: flex; flex-direction: column; gap: 22px; }
.step { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.step__n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 400 21px/1 var(--font-punch); color: var(--paper-ink); background: var(--ticket); box-shadow: inset 0 0 0 4px var(--ember-ink-paper); }
.step.ok .step__n { background: var(--ember-ink-paper); color: var(--ticket); }
.step.ok .step__n::after { content: ""; }
.step__t { font: 700 26px/1.08 var(--font-display); letter-spacing: -.03em; color: var(--paper-ink); margin: 4px 0 10px; }
.step__b { font-size: 16px; line-height: 25px; color: var(--paper-muted); margin: 0 0 12px; }
.st1 { padding: 26px 22px 24px; }
.st2 { padding: 26px 22px 24px; }
.redtag { display: inline-block; font: 700 15px/1.1 var(--font-display); letter-spacing: -.01em; color: #fff; background: var(--danger); padding: 8px 11px 7px; border-radius: 3px; margin: 0 6px 8px 0; white-space: nowrap; vertical-align: .14em; box-shadow: 0 10px 24px -10px rgba(230,0,10,.6); }
.wa { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; }
.wa img { width: 20px; height: 20px; }
.btn .wa-ic { flex: none; }
.btn--wa { padding: 0 16px 0 12px; gap: 10px; background: #1fa855; color: #fff; box-shadow: 0 16px 40px -18px rgba(37,211,102,.7); }
.btn--wa:hover { color: #fff; background: #1b9a4d; }
@media (max-width: 599px) { .step .btn { width: calc(100% + 54px); margin-left: -54px; } }
.cal { margin-top: 2px; display: flex; flex-direction: column; gap: 12px; }
.cal-list { list-style: none; margin: 0; padding: 12px 0 0; border-top: 2px dashed #cdbfae; display: flex; flex-direction: column; gap: 4px; }
.cal-list li { display: block; font-size: 14px; line-height: 21px; color: var(--paper-muted); }
.cal-list .cal-d { white-space: nowrap; }
.cal-list strong { font: 700 15px/21px var(--font-display); letter-spacing: -.01em; color: var(--paper-ink); }
.cal-row { display: flex; flex-direction: column; gap: 6px; }
.cal-row__label { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1.2 var(--font-body); color: var(--paper-ink); }
.cal-row__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-row__btns .pill { flex: 1 1 auto; align-self: auto; }
.pill--strong { background: var(--paper-ink); color: var(--ticket); }
.pill--strong:hover { background: var(--ember-ink-paper); color: #fff; }
.cal__t { font: 700 20px/1.15 var(--font-display); letter-spacing: -.02em; color: var(--paper-ink); margin: 0; }
.cal__row { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-bottom: 1px solid #e2d6c6; }
.cal__when { display: flex; flex-direction: column; gap: 2px; font: 600 15px/22px var(--font-body); color: var(--paper-ink); }
.cal__d { font-weight: 500; color: var(--paper-muted); }
.cal__w { font: 700 16px/22px var(--font-display); letter-spacing: -.01em; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 8px 16px; border-radius: var(--pill); background: #fff; color: var(--paper-ink); box-shadow: inset 0 0 0 2px var(--paper-ink); font: 700 14px/1.2 var(--font-display); text-decoration: none; white-space: nowrap; align-self: flex-start; transition: background .15s, color .15s; }
.pill:hover { background: var(--paper-ink); color: var(--ticket); }
.pill img, .pill svg { flex: none; }
.pill--all { align-self: stretch; background: var(--paper-ink); color: var(--ticket); }
.pill--all:hover { background: var(--ember-ink-paper); color: #fff; }
.ob__mail { display: block; align-items: start; font-size: 15px; line-height: 23px; color: var(--ink-muted); padding: 2px 4px; }
.ob__mail svg { margin-top: 2px; }
.surv { margin-top: 18px; padding-top: 30px; border-top: 3px dashed rgba(238,157,51,.55); }
.surv .step__n { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 4px var(--ember); }
.surv .step.ok .step__n { background: var(--ember); color: var(--on-ember); }
.surv .step__t { color: var(--ink); }
.surv__lead { font-size: 16px; line-height: 25px; color: var(--ink-muted); margin: 0 0 24px; }
.surv .form { gap: 30px; }
@media (min-width: 900px) {
  .ob { padding: 44px 0 96px; }
  .ob__t { font-size: 104px; }
  .ob__p { font-size: 19px; line-height: 30px; }
  .st1, .st2 { padding: 34px 34px 30px; }
  .step { grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; }
  .step__n { width: 52px; height: 52px; font-size: 26px; }
  .step__t { font-size: 34px; }
  .cal__row { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
  .pill--all { align-self: flex-start; }
  .cal-row__btns .pill { flex: 0 0 auto; }
  .cal-row { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
  .cal-row__label { min-width: 150px; }
  .cal { gap: 10px; }
  .st1, .st2 { padding: 28px 30px 26px; }
}
@media (max-width: 599px) { .redtag { font-size: 13px; padding: 7px 9px 6px; } }
@media (max-width: 380px) { .pill { font-size: 13px; padding: 8px 12px; } }