/* =========================================================
   Apply Page — Step 1: Plan / 2: Info / 3: Payment or Booking
   Uses styles.css tokens; adds step-specific components
   ========================================================= */

/* ---------- Page shell ---------- */
.apply-body {
  min-height: 100vh;
  background: var(--black);
}

/* ---------- Mini nav ---------- */
.apply-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 20px var(--page-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.apply-nav .back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Noto Sans JP", var(--f-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--off-2);
  padding: 8px 4px;
  transition: color 0.3s;
}
.apply-nav .back-link:hover { color: var(--gold); }
.apply-nav .back-link .arrow {
  transition: transform 0.35s var(--ease);
  font-size: 16px;
}
.apply-nav .back-link:hover .arrow { transform: translateX(-4px); }

/* ---------- Step indicator ---------- */
.step-bar {
  background: var(--black-2);
  border-bottom: 1px solid var(--line);
  padding: 32px var(--page-x);
}
.step-bar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: center;
}
.step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  position: relative;
}
.step-num {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--f-serif);
  font-size: 18px;
  font-style: italic;
  color: var(--muted);
  flex-shrink: 0;
  transition: all 0.4s var(--ease);
  background: var(--black);
}
.step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.step-lbl {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.4s var(--ease);
}
.step-name {
  font-family: "Noto Sans JP", var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--off-2);
  letter-spacing: 0.02em;
  transition: color 0.4s var(--ease);
}
/* Active step */
.step.active .step-num {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
  font-style: normal;
  font-weight: 500;
}
.step.active .step-lbl { color: var(--gold); }
.step.active .step-name { color: var(--off); }
/* Completed step */
.step.done .step-num {
  background: var(--black);
  color: var(--gold);
  border-color: var(--gold);
}
.step.done .step-num::before { content: "✓"; font-style: normal; }
.step.done .step-num > * { display: none; }

@media (max-width: 800px) {
  .step-bar-inner { grid-template-columns: 1fr; gap: 8px; }
  .step { padding: 6px 0; }
  .step-num { width: 36px; height: 36px; font-size: 16px; }
}

/* ---------- Panel (each step) ---------- */
.apply-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 80px var(--page-x) 120px;
}
.apply-container.narrow { max-width: 820px; }

.apply-hd {
  text-align: center;
  margin-bottom: 60px;
}
.apply-hd .eyebrow { display: inline-block; margin-bottom: 20px; }
.apply-hd h1 {
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--off);
  margin-bottom: 20px;
}
.apply-hd h1 .em { font-style: italic; color: var(--gold-2); font-weight: 300; }
.apply-hd .lead {
  font-family: "Noto Serif JP", serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.85;
  color: var(--off-2);
  max-width: 680px;
  margin: 0 auto;
  letter-spacing: 0.02em;
}

.step-panel {
  display: none;
}
.step-panel.active { display: block; }

/* ---------- Plan Selection (Step 1) ---------- */
.plan-select {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.plan-choice {
  background: var(--black);
  padding: 48px 36px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background 0.4s var(--ease);
  cursor: pointer;
  border: 0;
  text-align: left;
  color: inherit;
  font: inherit;
}
.plan-choice:hover { background: var(--black-3); }
.plan-choice.recommended {
  background: var(--black-3);
}
.plan-choice.recommended::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--gold);
  pointer-events: none;
  z-index: 1;
}
.plan-tag {
  position: absolute;
  top: -1px;
  right: 24px;
  padding: 8px 16px;
  background: var(--gold);
  color: var(--black);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  z-index: 2;
  font-weight: 500;
}
.plan-tier {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.plan-name {
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: 38px;
  line-height: 1;
  color: var(--off);
  font-style: italic;
  margin-bottom: 6px;
}
.plan-jp {
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  color: var(--gold-2);
  margin-bottom: 32px;
  letter-spacing: 0.06em;
}
.plan-amt {
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: 44px;
  line-height: 1;
  color: var(--off);
  margin-bottom: 4px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.plan-amt .cur {
  font-size: 18px;
  color: var(--muted);
  font-family: var(--f-sans);
  font-weight: 400;
}
.plan-amt .was {
  font-size: 18px;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--gold-deep);
  margin-right: 10px;
  font-weight: 300;
}
.plan-amt.plan-amt--range {
  font-size: 34px;
  flex-wrap: wrap;
  row-gap: 4px;
  letter-spacing: 0.01em;
}
.plan-amt.plan-amt--range .range-sep {
  font-family: var(--f-mono);
  font-size: 16px;
  color: var(--gold);
  margin: 0 8px;
  font-weight: 400;
  align-self: center;
  letter-spacing: 0.1em;
}
.plan-amt.plan-amt--range .cur {
  font-size: 15px;
  margin-right: 1px;
}
@media (max-width: 520px) {
  .plan-amt.plan-amt--range {
    font-size: 28px;
  }
  .plan-amt.plan-amt--range .range-sep {
    font-size: 14px;
    margin: 0 6px;
  }
}
.plan-per {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 32px;
}
.plan-summary {
  list-style: none;
  padding: 0;
  margin-bottom: 32px;
  flex: 1;
}
.plan-summary li {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  color: var(--off);
  font-weight: 400;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  letter-spacing: 0.02em;
  line-height: 1.55;
}
.plan-summary li::before {
  content: "";
  width: 8px;
  height: 1px;
  background: var(--gold);
  margin-top: 10px;
  flex-shrink: 0;
}
.plan-choice .plan-select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: "Noto Sans JP", var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 16px 24px;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
  transition: all 0.35s var(--ease);
  min-height: 52px;
  z-index: 1;
  position: relative;
}
.plan-choice .plan-select-btn .arrow { transition: transform 0.35s var(--ease); font-size: 16px; }
.plan-choice:hover .plan-select-btn { background: var(--gold); color: var(--black); }
.plan-choice:hover .plan-select-btn .arrow { transform: translateX(4px); }
.plan-choice.recommended .plan-select-btn {
  background: var(--gold);
  color: var(--black);
  font-weight: 600;
}
.plan-choice.recommended:hover .plan-select-btn {
  background: var(--gold-2);
}

@media (max-width: 900px) {
  .plan-select { grid-template-columns: 1fr; }
}

/* ---------- Selected Plan Banner (Step 2/3 header) ---------- */
.selected-plan {
  background: var(--black-2);
  border: 1px solid var(--line-strong);
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.selected-plan-info {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.selected-plan-info .lbl {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--muted);
  text-transform: uppercase;
}
.selected-plan-info .name {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 24px;
  color: var(--off);
}
.selected-plan-info .amt {
  font-family: var(--f-serif);
  font-size: 20px;
  color: var(--gold-2);
  font-weight: 400;
}
.selected-plan .change-btn {
  font-family: "Noto Sans JP", var(--f-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gold);
  padding: 10px 18px;
  border: 1px solid var(--gold-deep);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s;
  letter-spacing: 0.04em;
}
.selected-plan .change-btn:hover {
  border-color: var(--gold);
  background: var(--black);
}

/* ---------- Form ---------- */
.form-section {
  margin-bottom: 48px;
}
.form-section h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 28px;
  color: var(--off);
  margin-bottom: 12px;
  letter-spacing: -0.005em;
}
.form-section .form-desc {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 32px;
  line-height: 1.75;
  font-weight: 400;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-family: "Noto Sans JP", var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--off-2);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-field label .req {
  color: var(--gold);
  font-size: 11px;
  font-family: var(--f-mono);
  letter-spacing: 0.16em;
}
.form-field label .opt {
  color: var(--muted-2);
  font-size: 11px;
  font-family: var(--f-mono);
  letter-spacing: 0.16em;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field select,
.form-field textarea {
  font-family: "Noto Sans JP", var(--f-sans);
  font-size: 16px;
  padding: 16px 18px;
  background: var(--black);
  border: 1px solid var(--line-strong);
  color: var(--off);
  transition: border-color 0.3s, background 0.3s;
  width: 100%;
  min-height: 56px;
  letter-spacing: 0.02em;
}
.form-field textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.7;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--black-2);
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--muted-2);
  font-family: "Noto Sans JP", sans-serif;
}
.form-field .hint {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  color: var(--muted-2);
  line-height: 1.5;
}
.form-field .err {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  color: #d99a7f;
  display: none;
  line-height: 1.5;
}
.form-field.error input,
.form-field.error select,
.form-field.error textarea {
  border-color: #b07f7f;
}
.form-field.error .err { display: block; }

@media (max-width: 700px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Terms checkbox ---------- */
.form-terms {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.checkbox-field {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  cursor: pointer;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  color: var(--off-2);
  line-height: 1.7;
}
.checkbox-field input {
  width: 20px;
  height: 20px;
  accent-color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 3px;
}
.checkbox-field a { color: var(--gold); text-decoration: underline; }
.checkbox-field a:hover { color: var(--gold-2); }

/* ---------- Next / back buttons ---------- */
.form-actions {
  margin-top: 48px;
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.form-actions .btn { min-height: 60px; padding: 20px 40px; }

/* ---------- Step 3: Payment (PayPal) ---------- */
.payment-panel {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .payment-panel { grid-template-columns: 1fr; }
}
.payment-summary {
  background: var(--black-2);
  border: 1px solid var(--line);
  padding: 40px 36px;
}
.payment-summary h4 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 22px;
  color: var(--off);
  margin-bottom: 8px;
}
.payment-summary .jp {
  font-family: "Noto Serif JP", serif;
  font-size: 13px;
  color: var(--gold-2);
  margin-bottom: 28px;
  letter-spacing: 0.06em;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  color: var(--off-2);
}
.summary-row.total {
  border-top: 1px solid var(--gold-deep);
  border-bottom: 1px solid var(--gold-deep);
  padding: 18px 0;
  margin-top: 8px;
}
.summary-row.total .lbl {
  color: var(--off);
  font-weight: 500;
}
.summary-row.total .val {
  font-family: var(--f-serif);
  font-size: 24px;
  color: var(--gold-2);
  font-weight: 400;
}
.summary-row .val {
  color: var(--off);
  font-weight: 500;
}

.payment-action {
  background: var(--black-3);
  border: 1px solid var(--gold-deep);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.payment-action .method-lbl {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--gold);
  text-transform: uppercase;
}
.payment-action h4 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 22px;
  color: var(--off);
  line-height: 1.35;
}
.payment-action p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  color: var(--off-2);
  line-height: 1.85;
  font-weight: 400;
}

/* PayPal button (placeholder styling, real button will replace) */
.paypal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  background: linear-gradient(180deg, #ffc439 0%, #f8b100 100%);
  color: #003087;
  font-family: "Noto Sans JP", var(--f-sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  border: 0;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
  border-radius: 4px;
  padding: 0 32px;
}
.paypal-btn:hover {
  filter: brightness(1.06);
  box-shadow: 0 4px 14px rgba(255,196,57,0.35);
  transform: translateY(-1px);
}
.paypal-btn .pp-logo {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.paypal-btn .pp-logo .b { color: #003087; }
.paypal-btn .pp-logo .l { color: #009cde; }

.pay-note {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  text-align: center;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

/* ---------- Step 3B: Booking (Mentoring) ---------- */
.booking-panel {
  background: var(--black-2);
  border: 1px solid var(--line);
  padding: 0;
  overflow: hidden;
}
.booking-hd {
  padding: 40px 40px 32px;
  border-bottom: 1px solid var(--line);
}
.booking-hd .lbl {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.booking-hd h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 30px;
  color: var(--off);
  margin-bottom: 14px;
  line-height: 1.25;
}
.booking-hd p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  color: var(--off-2);
  line-height: 1.9;
  font-weight: 400;
}

/* Placeholder calendar UI */
.booking-cal {
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 800px) {
  .booking-cal { grid-template-columns: 1fr; }
}
.cal-month {
  background: var(--black);
  border: 1px solid var(--line);
  padding: 24px;
}
.cal-month-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.cal-month-hd .name {
  font-family: var(--f-serif);
  font-size: 20px;
  font-style: italic;
  color: var(--off);
}
.cal-month-hd .nav-btn {
  padding: 6px 12px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s;
}
.cal-month-hd .nav-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.cal-days-hd {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
  padding: 0 4px;
}
.cal-days-hd .d {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--muted-2);
  text-align: center;
  text-transform: uppercase;
}
.cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-family: "Noto Sans JP", var(--f-sans);
  font-size: 14px;
  color: var(--off-2);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 36px;
}
.cal-day.blank { visibility: hidden; }
.cal-day.disabled {
  color: var(--muted-2);
  opacity: 0.4;
  cursor: not-allowed;
}
.cal-day.available:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.cal-day.selected {
  background: var(--gold);
  color: var(--black);
  font-weight: 600;
  border-color: var(--gold);
}

.cal-times h5 {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.cal-times-note {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 20px;
  line-height: 1.6;
}
.time-slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.time-slot {
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  background: var(--black);
  color: var(--off-2);
  font-family: "Noto Sans JP", var(--f-sans);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
  min-height: 48px;
}
.time-slot:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.time-slot.selected {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
  font-weight: 600;
}
.time-slot.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  color: var(--muted-2);
}
.time-slot.disabled:hover { border-color: var(--line-strong); color: var(--muted-2); }

/* Time slot grid with slot number indicator */
.time-slot.selected .slot-idx {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: var(--black);
  color: var(--gold);
  border-radius: 2px;
  font-size: 11px;
  font-family: var(--f-mono);
  font-weight: 500;
  vertical-align: 1px;
}
.time-slot .slot-idx { display: none; }

/* ---------- Chosen candidates list ---------- */
.chosen-list {
  padding: 32px 40px;
  border-top: 1px solid var(--line);
  background: var(--black-2);
}
.chosen-list h5 {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.chosen-list h5 .badge {
  background: var(--gold);
  color: var(--black);
  padding: 3px 10px;
  font-size: 10px;
  letter-spacing: 0.16em;
  border-radius: 2px;
  font-weight: 600;
  font-family: var(--f-mono);
}
.chosen-list .desc {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 20px;
  line-height: 1.75;
}
.chosen-slots {
  display: grid;
  gap: 12px;
}
.chosen-slot {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px 24px;
  background: var(--black);
  border: 1px solid var(--gold-deep);
  transition: border-color 0.3s;
}
.chosen-slot.empty {
  border-style: dashed;
  border-color: var(--line-strong);
  color: var(--muted-2);
}
.chosen-slot .idx {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 24px;
  color: var(--gold);
  line-height: 1;
  font-weight: 400;
}
.chosen-slot.empty .idx { color: var(--muted-2); }
.chosen-slot .datetime {
  font-family: "Noto Sans JP", var(--f-sans);
  font-size: 16px;
  color: var(--off);
  font-weight: 500;
}
.chosen-slot.empty .datetime {
  color: var(--muted-2);
  font-weight: 400;
  font-style: italic;
}
.chosen-slot .remove {
  padding: 8px 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s;
  text-transform: uppercase;
}
.chosen-slot .remove:hover {
  border-color: #b07f7f;
  color: #b07f7f;
}
.chosen-slot.empty .remove { visibility: hidden; }

/* Time slots: make them tighter for 14 slots (11-24h) */
.time-slots-14 {
  grid-template-columns: repeat(3, 1fr);
}
.time-slots-14 .time-slot {
  padding: 10px 8px;
  font-size: 13px;
  min-height: 42px;
}
@media (max-width: 500px) {
  .time-slots-14 { grid-template-columns: repeat(2, 1fr); }
}

/* Booking preparation checklist */
.booking-prep {
  padding: 40px;
  border-top: 1px solid var(--line);
  background: var(--black-3);
}
.booking-prep h5 {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.booking-prep ul {
  list-style: none;
  padding: 0;
}
.booking-prep li {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  color: var(--off-2);
  padding: 10px 0;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-weight: 400;
  line-height: 1.7;
}
.booking-prep li::before {
  content: "";
  width: 6px;
  height: 6px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  flex-shrink: 0;
  translate: 0 2px;
}

/* ---------- Trust bar (bottom of apply page) ---------- */
.trust-bar {
  background: var(--black-2);
  border-top: 1px solid var(--line);
  padding: 60px var(--page-x);
}
.trust-bar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 900px) {
  .trust-bar-inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }
}
.trust-lbl {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--gold);
  text-transform: uppercase;
}
.trust-firms {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.trust-firm {
  font-family: var(--f-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 18px;
  color: var(--off-2);
  opacity: 0.85;
}
.trust-firm .check {
  color: var(--gold);
  font-style: normal;
  font-size: 0.7em;
  margin-right: 6px;
  vertical-align: 2px;
}
.trust-zen {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}
.trust-zen b {
  color: var(--gold-2);
  font-weight: 500;
}

/* ---------- Apply FAQ (compact) ---------- */
.apply-faq {
  padding: 80px var(--page-x);
}
.apply-faq-inner {
  max-width: 900px;
  margin: 0 auto;
}
.apply-faq h2 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 32px;
  color: var(--off);
  margin-bottom: 40px;
  text-align: center;
  letter-spacing: -0.005em;
}

/* ---------- Apply Footer ---------- */
.apply-footer {
  padding: 40px var(--page-x);
  border-top: 1px solid var(--line);
  background: var(--black-2);
  text-align: center;
}
.apply-footer .risk {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  color: var(--muted-2);
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto 16px;
}
.apply-footer .copy {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted-2);
  text-transform: uppercase;
}

/* ==== 今だけ価格（通常価格の取り消し線つき） ==== */
.price-was{text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:currentColor;opacity:.68;font-weight:500;white-space:nowrap}
.price-now{font-weight:700;white-space:nowrap}
.price-now-tag{display:inline-block;font-weight:800;letter-spacing:.08em;padding:.34em .8em;border-radius:999px;background:var(--red);color:#fff;line-height:1.2;white-space:nowrap}
/* 大きな金額欄：元値とバッジを1行、今の価格を次の行にして桁落ちを防ぐ */
.price .price-was,.price-amt .price-was,.rt-price .price-was,.price-wrap .price-was{font-size:.46em}
.price .price-now-tag,.price-amt .price-now-tag,.rt-price .price-now-tag,.price-wrap .price-now-tag{font-size:.34em}
.price-amt--deal{display:flex;flex-direction:column;align-items:flex-start;gap:.14em;font-size:clamp(34px,3.2vw,52px);line-height:1.05}
.price-amt--deal .price-old{display:flex;align-items:center;flex-wrap:wrap;gap:.5em}
.price-amt--deal .price-new{display:flex;align-items:baseline;gap:.02em}
.price-amt--deal .price-now-tag{font-size:.28em}

/* ==== Plan comparison: desktop row, mobile horizontal comparison ==== */
.plan-compare-title{margin:34px 0 14px;font-family:"Noto Serif JP",serif;font-size:24px;font-weight:400;color:var(--off);letter-spacing:.04em}
.plan-compare-title span{margin-left:10px;font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.plan-select{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;overflow-x:visible}
.plan-choice{min-width:0}
@media(max-width:900px){
  .plan-select{display:grid;grid-template-columns:repeat(3,minmax(270px,1fr));overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
  .plan-choice{scroll-snap-align:start}
}
/* ==== Public consultation booking ==== */
.public-booking-body{padding:32px 40px 40px;background:var(--black-2)}
.booking-message{min-height:24px;margin-bottom:12px;color:var(--gold-2);font-family:"Noto Sans JP",sans-serif;font-size:14px;line-height:1.7}
.booking-message.error{color:#ffb3bf}
.public-booking-steps{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;color:var(--muted);font:11px/1.2 var(--f-mono);letter-spacing:.04em}
.public-booking-steps span{padding:9px 12px;border:1px solid var(--line-strong);border-radius:999px}
.public-booking-steps span.active{color:var(--gold-2);border-color:var(--gold-deep);background:rgba(212,181,120,.1)}
.public-booking-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.public-booking-section{min-width:0;padding:22px;background:var(--black);border:1px solid var(--line)}
.public-booking-section h4{margin:0 0 16px;color:var(--off);font:500 17px/1.4 "Noto Sans JP",sans-serif}
.public-booking-section h4 span{display:block;margin-top:3px;color:var(--muted);font:11px/1.2 var(--f-mono);letter-spacing:.04em}
.public-date-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.public-date{min-height:68px;padding:8px 5px;border:1px solid var(--line-strong);border-radius:8px;background:rgba(255,255,255,.02);color:var(--off);cursor:pointer}
.public-date strong,.public-date small{display:block}.public-date strong{font:500 15px/1.4 "Noto Sans JP",sans-serif}.public-date small{margin-top:4px;color:var(--muted);font:10px/1.2 var(--f-mono)}
.public-date:hover,.public-date.selected{border-color:var(--gold);background:rgba(212,181,120,.16);color:var(--gold-2)}
.public-date:focus-visible,.public-slot:focus-visible{outline:3px solid var(--gold-2);outline-offset:2px}
.public-slot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-height:68px}
.public-slot{min-height:58px;padding:8px 5px;border:1px solid var(--line-strong);border-radius:8px;background:rgba(255,255,255,.02);color:var(--off);cursor:pointer}
.public-slot strong,.public-slot small{display:block}.public-slot strong{font:600 16px/1.4 "Noto Sans JP",sans-serif}.public-slot small{margin-top:3px;color:var(--muted);font:10px/1.2 var(--f-mono)}
.public-slot:hover,.public-slot.selected{border-color:var(--gold);background:rgba(212,181,120,.16);color:var(--gold-2)}
.public-booking-empty,.public-booking-loading{grid-column:1/-1;padding:18px 10px;border:1px dashed var(--line-strong);color:var(--muted);font:13px/1.7 "Noto Sans JP",sans-serif;text-align:center}
.public-booking-empty span,.public-booking-loading span{font-size:11px;color:var(--muted-2)}
.public-selected-slot{margin-top:18px;padding:15px 16px;border-left:3px solid var(--gold);background:rgba(212,181,120,.08);color:var(--off);font:500 15px/1.6 "Noto Sans JP",sans-serif}
.public-hearing-note{margin-top:14px;color:var(--muted);font:13px/1.7 "Noto Sans JP",sans-serif}.public-hearing-note span{display:block;color:var(--muted-2);font:11px/1.5 var(--f-mono)}
.consultation-mode .apply-faq{display:none}
@media(max-width:800px){
  .public-booking-body{padding:24px 18px 28px}.public-booking-grid{grid-template-columns:1fr;gap:16px}.public-booking-section{padding:18px}.public-slot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:420px){.plan-compare-title{font-size:21px}.public-date-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.public-slot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.public-booking-steps span{font-size:10px;padding:8px 9px}}