/* =========================================
   business.css - Business view only (QUO-28 / OCW-17)

   Own sheet, same reasoning as rider.css: no component shared with Home.
   Zero literal hex values - every colour a base.css token, so the warm-stone
   light theme needs no second palette. No orange.
   ========================================= */

.business-view { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; z-index: 1; }

.biz-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(32px, 6vh, 72px) clamp(20px, 5vw, 64px) clamp(48px, 10vh, 96px);
  -webkit-overflow-scrolling: touch;
}

.biz-header { max-width: 64ch; margin: 0 0 clamp(36px, 6vh, 60px); }
.biz-eyebrow { margin: 0 0 14px; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sidebar-text); }
.biz-title { margin: 0 0 20px; font-size: clamp(2rem, 5.2vw, 3.4rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.03em; color: var(--sidebar-active-text); }
.biz-lede { margin: 0; font-size: clamp(1rem, 1.6vw, 1.14rem); line-height: 1.65; color: var(--sidebar-text); }

.biz-block { max-width: 78ch; margin: 0 0 clamp(36px, 6vh, 58px); }
.biz-section-title { margin: 0 0 12px; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 600; line-height: 1.16; letter-spacing: -0.025em; color: var(--sidebar-active-text); }
.biz-section-lede { margin: 0 0 clamp(22px, 3.5vh, 32px); max-width: 60ch; font-size: clamp(0.96rem, 1.5vw, 1.06rem); line-height: 1.65; color: var(--sidebar-text); }
.biz-text { margin: 0; max-width: 68ch; font-size: clamp(0.94rem, 1.4vw, 1.02rem); line-height: 1.68; color: var(--sidebar-text); }

/* ---- steps ---- */
.biz-steps { list-style: none; margin: 0; padding: 0; max-width: 70ch; }
.biz-step { display: grid; grid-template-columns: 44px 1fr; gap: clamp(16px, 2.4vw, 26px); padding: 0 0 clamp(24px, 3.8vh, 36px); }
.biz-step-rail { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.biz-step:not(:last-child) .biz-step-rail::after {
  content: ''; position: absolute; top: 62px; bottom: -4px; left: 50%; width: 1px; transform: translateX(-50%);
  background: linear-gradient(to bottom, var(--border-content-frame), var(--border-content-glow));
}
.biz-step-num { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; color: var(--sidebar-text); opacity: 0.72; }
.biz-step-icon { width: 22px; height: 22px; color: var(--sidebar-active-text); flex: 0 0 auto; }
.biz-step-title { margin: 0 0 9px; font-size: clamp(1.02rem, 1.8vw, 1.22rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--sidebar-active-text); }
.biz-step-text { margin: 0; font-size: clamp(0.92rem, 1.35vw, 1rem); line-height: 1.66; color: var(--sidebar-text); }

/* ---- earnings ---- */
.biz-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(14px, 2vw, 20px); }
.biz-stat { padding: clamp(22px, 2.8vw, 28px); border: 1px solid var(--border-content-frame); border-radius: 14px; background: var(--dark-section-bg); }
.biz-stat-icon { width: 20px; height: 20px; margin-bottom: 16px; color: var(--sidebar-active-text); }
.biz-stat-value { margin: 0 0 4px; font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.035em; color: var(--sidebar-active-text); }
.biz-stat-label { margin: 0 0 12px; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sidebar-text); opacity: 0.78; }
.biz-stat-text { margin: 0; font-size: clamp(0.88rem, 1.3vw, 0.95rem); line-height: 1.62; color: var(--sidebar-text); }
.biz-note { margin: clamp(16px, 2.4vh, 22px) 0 0; max-width: 64ch; font-size: clamp(0.9rem, 1.35vw, 0.98rem); line-height: 1.64; color: var(--sidebar-text); }

/* ---- toolset ---- */
.biz-head-row { display: flex; align-items: center; gap: 12px; }
.biz-head-icon { width: 22px; height: 22px; margin-bottom: 12px; color: var(--sidebar-active-text); flex: 0 0 auto; }

/* ---- the not-a-promise box: its own surface so it cannot be skimmed past ---- */
.biz-notice { max-width: 70ch; padding: clamp(20px, 3vh, 28px) clamp(20px, 3vw, 30px); border: 1px solid var(--border-content-frame); border-radius: 14px; background: var(--dark-section-bg); }
.biz-notice-icon { width: 20px; height: 20px; margin-bottom: 14px; color: var(--sidebar-active-text); }
.biz-notice-title { margin: 0 0 12px; font-size: clamp(1rem, 1.6vw, 1.12rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--sidebar-active-text); }
.biz-notice-text { margin: 0 0 12px; font-size: clamp(0.9rem, 1.35vw, 0.98rem); line-height: 1.66; color: var(--sidebar-text); }
.biz-notice-text:last-child { margin-bottom: 0; }
.biz-notice-text strong { font-weight: 600; color: var(--sidebar-active-text); }

/* ---- closing ---- */
.biz-close { max-width: 70ch; padding: clamp(24px, 4vh, 36px) clamp(22px, 3.4vw, 34px); border: 1px solid var(--border-content-frame); border-radius: 16px; background: var(--dark-section-bg); }
.biz-close-icon { width: 22px; height: 22px; margin-bottom: 16px; color: var(--sidebar-active-text); }
.biz-close-title { margin: 0 0 14px; font-size: clamp(1.12rem, 2.1vw, 1.44rem); font-weight: 600; line-height: 1.28; letter-spacing: -0.02em; color: var(--sidebar-active-text); }
.biz-close-text { margin: 0; font-size: clamp(0.94rem, 1.4vw, 1.02rem); line-height: 1.68; color: var(--sidebar-text); }

/* ---- motion: reading-order stagger, spring easing, off under reduced-motion ---- */
@media (prefers-reduced-motion: no-preference) {
  .business-view.is-entering .biz-step,
  .business-view.is-entering .biz-stat,
  .business-view.is-entering .biz-notice,
  .business-view.is-entering .biz-close {
    opacity: 0; transform: translateY(10px);
    animation: biz-rise 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .business-view.is-entering .biz-step:nth-child(1) { animation-delay: 0.04s; }
  .business-view.is-entering .biz-step:nth-child(2) { animation-delay: 0.09s; }
  .business-view.is-entering .biz-step:nth-child(3) { animation-delay: 0.14s; }
  .business-view.is-entering .biz-stat:nth-child(1) { animation-delay: 0.19s; }
  .business-view.is-entering .biz-stat:nth-child(2) { animation-delay: 0.24s; }
  .business-view.is-entering .biz-notice { animation-delay: 0.29s; }
  .business-view.is-entering .biz-close { animation-delay: 0.34s; }
}
@keyframes biz-rise { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 767px) {
  .biz-step { grid-template-columns: 32px 1fr; gap: 14px; }
  .biz-step:not(:last-child) .biz-step-rail::after { top: 56px; }
  .biz-step-icon { width: 19px; height: 19px; }
  .biz-stats { grid-template-columns: 1fr; }
}