/*
  Modern elegant polish v1
  Final layer only. Keeps the current layout/content and refines spacing,
  cards, mobile horizontal appeal, and subtle motion.
*/

:root {
  --bt-polish-line: #dddddd;
  --bt-polish-text: #252525;
  --bt-polish-muted: #666666;
  --bt-polish-shadow-hover: 0 22px 48px rgba(0, 0, 0, .10);
  --bt-polish-ease: cubic-bezier(.16, 1, .3, 1);
}

html {
  scroll-padding-top: 92px;
}

.site-shell,
.intro-copy,
.first-time,
.benefits,
.freedom,
.appeal,
.support-section,
.salary,
.brands,
.faq,
.flow,
.heaven-parts,
.entry,
.job-info {
  background: #fff !important;
}

.section-label {
  color: #6d6d6d !important;
  letter-spacing: .24em !important;
}

.section-head h2 {
  color: var(--bt-polish-text) !important;
}

.section-head > p:not(.section-label),
.intro-copy__inner > p,
.first-time__text p,
.flow__text p,
.flow__note p {
  color: var(--bt-polish-muted) !important;
}

.intro-copy__inner,
.first-time__inner,
.flow__inner,
.entry__inner {
  background: #fff !important;
  border-color: var(--bt-polish-line) !important;
}

.intro-copy__inner > p:last-child,
.first-time__text,
.first-time__text p,
.flow__text,
.flow__text p,
.heaven-parts .section-head > p:not(.section-label),
.entry__inner > p:not(.section-label) {
  text-align: left !important;
}

.heaven-parts .section-head > p:not(.section-label),
.entry__inner > p:not(.section-label) {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.intro-copy__inner,
.first-time__inner {
  box-shadow: none !important;
}

.intro-copy__inner h2,
.first-time .section-head h2,
.flow .section-head h2 {
  text-align: center !important;
}

.first-time__points {
  display: grid !important;
  gap: 10px !important;
}

.first-time__points div {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 58px !important;
  padding: 14px 18px !important;
  text-align: center !important;
  color: #111 !important;
  background: #fff !important;
  border: 1px solid var(--bt-polish-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .035) !important;
}

.first-time__points div::before {
  display: none !important;
  content: none !important;
}

.flow-list {
  display: grid !important;
  gap: 10px !important;
}

.flow-step {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 72px !important;
  padding: 14px 16px !important;
  text-align: left !important;
  background: #fff !important;
  border: 1px solid var(--bt-polish-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .035) !important;
}

.flow-step__number {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  color: #111 !important;
  background: #fff !important;
  border: 1px solid #111 !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
}

.flow-step p {
  margin: 0 !important;
  text-align: left !important;
  line-height: 1.55 !important;
}

.flow__note {
  padding: 16px 18px !important;
  text-align: left !important;
  background: #fff !important;
  border: 1px solid var(--bt-polish-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .035) !important;
}

.benefit-highlight,
.freedom-card,
.support-list div,
.salary-card,
.parts-card,
.faq-list details,
.job-table dl,
.brand-list article {
  border-color: var(--bt-polish-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.benefit-highlight,
.freedom-card,
.entry__inner {
  box-shadow: 0 10px 28px rgba(0, 0, 0, .035) !important;
}

#appeal .story-panel-list {
  scroll-behavior: smooth !important;
}

#appeal .story-panel {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid var(--bt-polish-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  filter: none !important;
}

#appeal .story-panel__number {
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  min-width: 104px !important;
  padding: 8px 12px !important;
  color: #fff !important;
  background: rgba(17, 17, 17, .92) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  letter-spacing: .18em !important;
}

#appeal .story-panel img {
  display: block !important;
  width: 100% !important;
}

#appeal .story-panel.bt-reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .benefit-highlight:hover,
  .freedom-card:hover,
  .support-list div:hover,
  .salary-card:hover,
  .parts-card:hover,
  .faq-list details:hover,
  .brand-list article:hover,
  .flow-step:hover,
  .first-time__points div:hover {
    transform: translate3d(0, -3px, 0) !important;
    border-color: #c8c8c8 !important;
    box-shadow: var(--bt-polish-shadow-hover) !important;
  }
}

@media screen and (min-width: 769px) {
  .intro-copy,
  .first-time,
  .benefits,
  .freedom,
  .appeal,
  .support-section,
  .salary,
  .brands,
  .faq,
  .flow,
  .heaven-parts,
  .entry,
  .job-info {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  .section-head {
    margin-bottom: 36px !important;
  }

  .first-time .section-head,
  .flow .section-head,
  .appeal--story .section-head,
  .heaven-parts .section-head {
    margin-bottom: 38px !important;
  }

  .intro-copy__inner,
  .first-time__inner,
  .flow__inner,
  .entry__inner {
    padding: 36px 38px !important;
  }

  .intro-copy__inner,
  .first-time__inner,
  .flow__inner {
    max-width: 840px !important;
  }

  .first-time__text,
  .flow__text,
  .flow__note {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .first-time__points {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .first-time__points div:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  .flow-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .flow-step {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    min-height: 76px !important;
    padding: 16px 18px !important;
  }

  .flow-step__number {
    width: 48px !important;
    height: 48px !important;
  }

  #appeal .story-panel-list {
    gap: 14px !important;
  }
}

@media screen and (max-width: 768px) {
  .intro-copy,
  .first-time,
  .benefits,
  .freedom,
  .appeal,
  .support-section,
  .salary,
  .brands,
  .faq,
  .flow,
  .heaven-parts,
  .entry,
  .job-info {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  .pickup-slider {
    padding-top: 16px !important;
    padding-bottom: 22px !important;
  }

  .section-head,
  .appeal--story .section-head,
  .heaven-parts .section-head {
    margin-bottom: 30px !important;
  }

  .first-time .section-head,
  .flow .section-head,
  .appeal--story .section-head,
  .brands .section-head,
  .faq .section-head,
  .heaven-parts .section-head {
    margin-bottom: 32px !important;
  }

  .intro-copy__inner,
  .first-time__inner,
  .flow__inner,
  .entry__inner,
  .benefit-highlight {
    padding: 24px 20px !important;
  }

  .intro-copy__inner > p:last-child,
  .first-time__text p,
  .flow__text p,
  .flow__note p {
    font-size: 15px !important;
    line-height: 1.9 !important;
  }

  .first-time__points {
    margin-top: 0 !important;
  }

  .flow-list {
    margin-top: 0 !important;
  }

  .flow__note {
    margin-top: 14px !important;
  }

  .benefit-highlight ul,
  .freedom-grid,
  .support-list,
  .salary-grid,
  .brand-list,
  .faq-list,
  .parts-grid,
  .job-table {
    gap: 10px !important;
  }

  #appeal {
    overflow: hidden !important;
  }

  #appeal .story-panel-list {
    display: flex !important;
    width: calc(100% + 40px) !important;
    max-width: none !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding: 2px 54px 12px 20px !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #appeal .story-panel-list::-webkit-scrollbar {
    display: none !important;
  }

  #appeal .story-panel,
  #appeal .story-panel--left,
  #appeal .story-panel--right {
    flex: 0 0 82vw !important;
    width: 82vw !important;
    max-width: 330px !important;
    scroll-snap-align: start !important;
  }

  #appeal .story-panel img {
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
  }
}

@media screen and (max-width: 420px) {
  .intro-copy,
  .first-time,
  .benefits,
  .freedom,
  .appeal,
  .support-section,
  .salary,
  .brands,
  .faq,
  .flow,
  .heaven-parts,
  .entry,
  .job-info {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .intro-copy__inner,
  .first-time__inner,
  .flow__inner,
  .entry__inner,
  .benefit-highlight {
    padding: 22px 18px !important;
  }

  .section-head,
  .appeal--story .section-head,
  .heaven-parts .section-head,
  .first-time .section-head,
  .flow .section-head,
  .brands .section-head,
  .faq .section-head {
    margin-bottom: 30px !important;
  }

  .flow-step {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 12px !important;
    min-height: 68px !important;
    padding: 13px 14px !important;
  }

  .flow-step__number {
    width: 40px !important;
    height: 40px !important;
    font-size: 12px !important;
  }

  #appeal .story-panel,
  #appeal .story-panel--left,
  #appeal .story-panel--right {
    flex-basis: 80vw !important;
    width: 80vw !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}