/* =============================================================
   YORK BUSINESS OS — product page
   Builds on css/style.css tokens. Everything is scoped to .bos so
   nothing here can leak into the rest of the site.
   ============================================================= */

.bos {
  --bos-bg:          var(--bg);
  --bos-tint:        #F1EEE9;
  --bos-surface:     #FFFFFF;
  --bos-text:        var(--text);
  --bos-muted:       var(--muted);
  --bos-faint:       var(--faint);
  --bos-line:        rgba(24, 25, 28, 0.09);
  --bos-line-strong: rgba(24, 25, 28, 0.16);
  --bos-glass:       rgba(255, 255, 255, 0.58);
  --bos-glass-hi:    rgba(255, 255, 255, 0.80);
  --bos-glass-rim:   rgba(255, 255, 255, 0.85);
  --bos-glass-edge:  rgba(24, 25, 28, 0.07);
  --bos-shadow:      0 1px 1px rgba(20, 18, 14, 0.04), 0 18px 48px -18px rgba(20, 18, 14, 0.22);
  --bos-green:  #2A6B4A;  --bos-green-soft:  #E3F0E8;
  --bos-amber:  #8A5C0C;  --bos-amber-soft:  #FAEFD8;
  --bos-blue:   #2F5DA8;  --bos-blue-soft:   #E6EDF8;
  --bos-violet: #6A4BA8;  --bos-violet-soft: #EEE8F8;
  --bos-r:      20px;
  --bos-r-sm:   12px;
  --bos-ease:   cubic-bezier(0.22, 1, 0.36, 1);

  background: var(--bos-bg);
  color: var(--bos-text);
  overflow-x: clip;
}

@media (prefers-color-scheme: dark) {
  body.page--business-os { background: #0B0C0F; }
  .bos {
    --bos-bg:          #0B0C0F;
    --bos-tint:        #111318;
    --bos-surface:     #17191E;
    --bos-text:        #EDEBE7;
    --bos-muted:       #A9A7A1;
    --bos-faint:       #7B7973;
    --bos-line:        rgba(255, 255, 255, 0.08);
    --bos-line-strong: rgba(255, 255, 255, 0.16);
    --bos-glass:       rgba(30, 32, 39, 0.52);
    --bos-glass-hi:    rgba(32, 34, 41, 0.74);
    --bos-glass-rim:   rgba(255, 255, 255, 0.10);
    --bos-glass-edge:  rgba(0, 0, 0, 0.45);
    --bos-shadow:      0 1px 1px rgba(0, 0, 0, 0.3), 0 24px 56px -20px rgba(0, 0, 0, 0.7);
    --bos-green:  #7CC59D;  --bos-green-soft:  rgba(60, 160, 110, 0.16);
    --bos-amber:  #E2B45E;  --bos-amber-soft:  rgba(220, 160, 50, 0.16);
    --bos-blue:   #8FB0E8;  --bos-blue-soft:   rgba(80, 130, 220, 0.18);
    --bos-violet: #B9A2EA;  --bos-violet-soft: rgba(150, 110, 230, 0.18);
  }
}

/* Component display rules (grid, inline-flex) would otherwise override the hidden attribute. */
.bos [hidden] { display: none !important; }
.bos h2, .bos h3, .bos h4 { color: var(--bos-text); }
.bos p { color: inherit; }
.bos :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* Liquid Glass surface: translucent fill, blur of what's behind, a bright rim and a soft drop. */
.bos .glass {
  background: var(--bos-glass);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid var(--bos-glass-rim);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 1px var(--bos-glass-edge), var(--bos-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bos .glass { background: var(--bos-glass-hi); }
}

.bos-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* ── Section rhythm ── */
.bos-section { position: relative; }
.bos-section--tint { background: var(--bos-tint); }
.bos-head { max-width: 46rem; margin-bottom: var(--s-12); }
.bos-head h2 {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.06;
  margin-bottom: var(--s-4);
  text-wrap: balance;
}
.bos-head p { font-size: var(--t-lg); color: var(--bos-muted); line-height: 1.6; }
.bos-head--center { margin-inline: auto; text-align: center; }
.bos-head--center p { margin-inline: auto; }


/* ── Hero ── */
.bos-hero {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  color: var(--inv);
  padding: calc(var(--nav-h) + clamp(3.5rem, 9vw, 7rem)) 0 clamp(4rem, 9vw, 7rem);
  isolation: isolate;
}
.bos-hero__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38rem 26rem at 78% 30%, rgba(232, 80, 42, 0.34), transparent 70%),
    radial-gradient(30rem 22rem at 92% 85%, rgba(80, 110, 220, 0.22), transparent 70%),
    radial-gradient(26rem 18rem at 8% 10%, rgba(255, 255, 255, 0.05), transparent 70%);
}
.bos-hero__inner { display: grid; gap: clamp(3rem, 6vw, 4.5rem); }
.bos-hero__copy { max-width: 64rem; }
.bos-hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.25rem);
  letter-spacing: -0.04em;
  line-height: 1.04;
  margin-bottom: var(--s-6);
  text-wrap: balance;
}
.bos-hero__line { display: block; font-weight: 300; color: rgba(255, 255, 255, 0.56); }
.bos-hero__line--strong { font-weight: 600; color: #FFFFFF; margin-top: 0.08em; }
.bos-hero__lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; color: rgba(255, 255, 255, 0.72); max-width: 40rem; }
.bos-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
.bos-hero__note { margin-top: var(--s-5); font-size: var(--t-sm); color: rgba(255, 255, 255, 0.5); }
.bos-hero__note a { color: #FFFFFF; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 3px; }
.bos-hero__note a:hover { text-decoration-color: var(--accent); }

.bos-flow { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.bos-flow::before {
  content: ''; position: absolute; left: 8%; right: 8%; top: 37px; height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(232, 80, 42, 0.65), rgba(255, 255, 255, 0.04));
}
.bos-hero .glass {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 20px 40px -24px rgba(0, 0, 0, 0.8);
}
.bos-flow__step {
  position: relative;
  display: grid; gap: var(--s-4); align-content: start;
  padding: var(--s-5);
  border-radius: 20px;
  font-size: var(--t-sm); line-height: 1.55; color: rgba(255, 255, 255, 0.7);
}
.bos-flow__step strong { display: block; color: #FFFFFF; font-weight: 600; font-size: var(--t-base); margin-bottom: 2px; }
.bos-flow__icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 11px;
  background: rgba(232, 80, 42, 0.2); color: #FF9A7A;
}
.bos-flow__icon .bos-icon { width: 17px; height: 17px; }


/* ── Features (typography-led, no boxes) ── */
.bos-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-10) var(--s-8); }
.bos-feature { padding-top: var(--s-6); border-top: 1px solid var(--bos-line-strong); }
.bos-feature__icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--accent-glow); color: var(--accent-deep); margin-bottom: var(--s-5);
}
.bos-feature h3 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: var(--s-3); }
.bos-feature p { font-size: var(--t-sm); line-height: 1.65; color: var(--bos-muted); }
@media (prefers-color-scheme: dark) { .bos-feature__icon { color: #FF9A7A; } }


/* ── Interactive demo ── */
.bos-demo {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--bos-surface);
  border: 1px solid var(--bos-line);
  box-shadow: var(--bos-shadow);
}
.bos-demo__bar {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 12px 16px; border-bottom: 1px solid var(--bos-line);
  background: linear-gradient(var(--bos-surface), var(--bos-tint));
}
.bos-demo__dots { display: inline-flex; gap: 6px; }
.bos-demo__dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--bos-line-strong); }
.bos-demo__title { font-size: var(--t-sm); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bos-demo__fict { font-weight: 400; color: var(--bos-faint); }
.bos-demo__pill {
  margin-left: auto; flex-shrink: 0;
  padding: 4px 10px; border-radius: 999px;
  font-size: var(--t-xs); font-weight: 600;
  background: var(--bos-amber-soft); color: var(--bos-amber);
}
.bos-demo__tabs, .bos-switch {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px;
  background: var(--bos-tint); border: 1px solid var(--bos-line);
}
.bos-demo__tabs { margin: 16px 16px 0; }
.bos-demo__tabs button, .bos-switch button {
  padding: 7px 14px; border-radius: 9px;
  font-size: var(--t-sm); font-weight: 500; color: var(--bos-muted);
  transition: background var(--ease), color var(--ease), box-shadow var(--ease);
}
.bos-demo__tabs button:hover, .bos-switch button:hover { color: var(--bos-text); }
.bos-demo__tabs button[aria-selected="true"], .bos-switch button[aria-selected="true"] {
  background: var(--bos-surface); color: var(--bos-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--bos-line);
}
.bos-demo__panel { padding: 16px; }

.bos-inbox { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px; min-height: 340px; }
.bos-inbox__list { display: grid; gap: 6px; align-content: start; }
.bos-inbox__item {
  width: 100%; text-align: left; display: grid; gap: 4px;
  padding: 12px 14px; border-radius: 14px; border: 1px solid transparent;
  color: var(--bos-text);
  transition: background var(--ease), border-color var(--ease);
}
.bos-inbox__item:hover { background: var(--bos-tint); }
.bos-inbox__item.is-active { background: var(--bos-tint); border-color: var(--bos-line); }
.bos-inbox__row { display: flex; justify-content: space-between; gap: 8px; font-size: var(--t-sm); }
.bos-inbox__row time { color: var(--bos-faint); font-size: var(--t-xs); white-space: nowrap; }
.bos-inbox__what { font-size: var(--t-sm); color: var(--bos-muted); line-height: 1.4; }
.bos-tag {
  justify-self: start; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1.6;
}
.bos-tag--green  { background: var(--bos-green-soft);  color: var(--bos-green); }
.bos-tag--amber  { background: var(--bos-amber-soft);  color: var(--bos-amber); }
.bos-tag--blue   { background: var(--bos-blue-soft);   color: var(--bos-blue); }
.bos-tag--violet { background: var(--bos-violet-soft); color: var(--bos-violet); }

.bos-inbox__detail { border-left: 1px solid var(--bos-line); padding: 8px 8px 8px 24px; }
.bos-lead h3 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.015em; }
.bos-lead__meta { font-size: var(--t-xs); color: var(--bos-faint); margin-top: 4px; }
.bos-lead blockquote {
  margin: var(--s-5) 0; padding: var(--s-4) var(--s-5);
  border-radius: 14px; background: var(--bos-tint);
  font-size: var(--t-sm); line-height: 1.6; color: var(--bos-text);
}
.bos-timeline { display: grid; gap: 0; margin-top: var(--s-5); }
.bos-timeline li {
  position: relative; padding: 0 0 var(--s-5) 28px;
  font-size: var(--t-sm); line-height: 1.5; color: var(--bos-text);
}
.bos-timeline li::before {
  content: ''; position: absolute; left: 4px; top: 6px; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--bos-line-strong); background: var(--bos-surface);
}
.bos-timeline li::after {
  content: ''; position: absolute; left: 8px; top: 20px; bottom: 2px; width: 2px; background: var(--bos-line);
}
.bos-timeline li:last-child::after { display: none; }
.bos-timeline li.is-done::before { background: var(--bos-green); border-color: var(--bos-green); }
.bos-timeline li.is-next::before { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.bos-timeline span { display: block; font-size: var(--t-xs); color: var(--bos-faint); font-weight: 500; }

.bos-flows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bos-flowcard { padding: var(--s-5); border-radius: 16px; background: var(--bos-tint); border: 1px solid var(--bos-line); }
.bos-flowcard h3 { font-size: var(--t-base); font-weight: 600; }
.bos-flowcard > p { font-size: var(--t-sm); color: var(--bos-muted); margin: 4px 0 var(--s-4); line-height: 1.5; }
.bos-steps { display: grid; gap: 8px; counter-reset: step; }
.bos-steps li {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: baseline;
  padding: 10px 12px; border-radius: 10px; background: var(--bos-surface);
  font-size: var(--t-sm); line-height: 1.45;
}
.bos-steps span { font-size: var(--t-xs); font-weight: 600; color: var(--accent-deep); }
@media (prefers-color-scheme: dark) { .bos-steps span { color: #FF9A7A; } }

.bos-report { display: grid; gap: var(--s-6); }
.bos-report__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bos-report__stats > div { padding: var(--s-4); border-radius: 14px; background: var(--bos-tint); display: grid; gap: 2px; font-size: var(--t-sm); color: var(--bos-muted); }
.bos-report__num { font-size: 1.9rem; font-weight: 600; letter-spacing: -0.03em; color: var(--bos-text); font-variant-numeric: tabular-nums; }
.bos-report__bars { display: grid; gap: 10px; max-width: 640px; }
.bos-bar { display: grid; grid-template-columns: 120px minmax(0, 1fr) 32px; gap: 12px; align-items: center; font-size: var(--t-sm); color: var(--bos-muted); }
.bos-bar i { display: block; height: 10px; border-radius: 6px; background: var(--bos-tint); position: relative; overflow: hidden; }
.bos-bar i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, var(--accent), #F08A5D); }
.bos-bar b { font-weight: 600; color: var(--bos-text); text-align: right; font-variant-numeric: tabular-nums; }
.bos-report__note { font-size: var(--t-xs); color: var(--bos-faint); }


/* ── How it works ── */
.bos-how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-8); counter-reset: how; }
.bos-how li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--s-3); align-items: center; }
.bos-how__num {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-size: var(--t-sm); font-weight: 600; color: #FFFFFF; background: var(--accent);
}
.bos-how h3 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.bos-how p { grid-column: 1 / -1; margin-top: var(--s-2); font-size: var(--t-sm); line-height: 1.65; color: var(--bos-muted); }


/* ── Pricing ── */
.bos-section--pricing { overflow: hidden; isolation: isolate; }
.bos-pricing__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(28rem 22rem at 30% 42%, rgba(232, 80, 42, 0.22), transparent 70%),
    radial-gradient(26rem 22rem at 72% 50%, rgba(90, 120, 230, 0.20), transparent 70%),
    radial-gradient(22rem 16rem at 52% 18%, rgba(240, 180, 90, 0.18), transparent 70%);
}
.bos-plans {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6);
  max-width: 940px; margin-inline: auto; align-items: stretch;
}
.bos-plan {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 26px;
}
.bos-plan--featured { border: 1.5px solid rgba(232, 80, 42, 0.55); background: var(--bos-glass-hi); }
.bos-plan h3 { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
.bos-plan__tagline { margin-top: var(--s-2); font-size: var(--t-sm); line-height: 1.55; color: var(--bos-muted); min-height: 3.1em; }
.bos-plan__price { margin-top: var(--s-6); display: flex; align-items: baseline; gap: 4px; }
.bos-plan__amount { font-size: clamp(2.75rem, 5vw, 3.5rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.bos-plan__per { font-size: var(--t-base); color: var(--bos-muted); }
.bos-plan__setup { margin-top: var(--s-2); font-size: var(--t-sm); font-weight: 500; color: var(--bos-text); }
.bos-plan__fit { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--bos-line); font-size: var(--t-sm); line-height: 1.55; color: var(--bos-muted); }
.bos-plan__list { display: grid; gap: 10px; margin: var(--s-5) 0 var(--s-8); flex: 1; }
.bos-plan__list li { display: flex; gap: 10px; font-size: var(--t-sm); line-height: 1.45; }
.bos-plan__list .bos-icon { width: 18px; height: 18px; color: var(--accent); margin-top: 1px; }
.bos .bos-plan .btn--outline-dark { border-color: var(--bos-line-strong); color: var(--bos-text); }
.bos .bos-plan .btn--outline-dark:hover { background: var(--bos-surface); border-color: var(--bos-text); }

.bos-compare { max-width: 940px; margin: var(--s-16) auto 0; }
.bos-compare h3 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; margin-bottom: var(--s-4); }
.bos-compare__scroll { overflow-x: auto; border-radius: var(--bos-r-sm); }
.bos-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); background: var(--bos-surface); border: 1px solid var(--bos-line); border-radius: var(--bos-r-sm); }
.bos-table th, .bos-table td { padding: 12px 16px; border-top: 1px solid var(--bos-line); text-align: left; vertical-align: middle; }
.bos-table thead th { border-top: 0; font-size: var(--t-xs); font-weight: 600; color: var(--bos-muted); background: var(--bos-tint); }
.bos-table thead th:not(:first-child), .bos-table td { text-align: center; width: 22%; }
.bos-table tbody th { font-weight: 400; color: var(--bos-text); }
.bos-table__price th, .bos-table__price td { font-weight: 600; font-variant-numeric: tabular-nums; }
.bos-table .bos-icon { width: 18px; height: 18px; margin-inline: auto; display: block; }
.bos-table td.bos-yes .bos-icon { color: var(--accent); }
.bos-table td.bos-no .bos-icon { color: var(--bos-faint); }

.bos-fine { max-width: 940px; margin: var(--s-6) auto 0; display: grid; gap: var(--s-3); }
.bos-fine__item { border: 1px solid var(--bos-line); border-radius: var(--bos-r-sm); background: var(--bos-surface); }
.bos-fine__item summary, .bos-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  cursor: pointer; list-style: none; font-weight: 600; color: var(--bos-text);
}
.bos-fine__item summary { padding: var(--s-4) var(--s-5); font-size: var(--t-sm); }
.bos-fine__item summary::-webkit-details-marker, .bos-faq summary::-webkit-details-marker { display: none; }
.bos-fine__item summary .bos-icon, .bos-faq summary .bos-icon { width: 18px; height: 18px; color: var(--bos-faint); transition: transform 0.25s var(--bos-ease); }
.bos-fine__item[open] summary .bos-icon, .bos-faq details[open] summary .bos-icon { transform: rotate(90deg); }
.bos-fine__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); padding: 0 var(--s-5) var(--s-5); }
.bos-fine__body h4 { font-size: var(--t-sm); font-weight: 600; margin-bottom: var(--s-2); }
.bos-fine__body li { font-size: var(--t-sm); line-height: 1.55; color: var(--bos-muted); padding: 4px 0 4px 14px; position: relative; }
.bos-fine__body li::before { content: ''; position: absolute; left: 0; top: 0.85em; width: 5px; height: 5px; border-radius: 50%; background: var(--bos-line-strong); }


/* ── Trades ── */
.bos-trades { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-10); align-items: center; }
.bos-trades h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: var(--s-4);  text-wrap: balance; }
.bos-trades p { color: var(--bos-muted); font-size: var(--t-lg); line-height: 1.6; }
.bos-trades__more { margin-top: var(--s-3); font-size: var(--t-base) !important; }
.bos-trades__more a, .bos-textlink { color: var(--bos-text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.bos-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.bos-chips li {
  padding: 10px 16px; border-radius: 999px;
  background: var(--bos-surface); border: 1px solid var(--bos-line);
  font-size: var(--t-sm); font-weight: 500;
}


/* ── Onboarding ── */
.bos-onboard { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.bos-onboard__copy h2 { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.06; margin-bottom: var(--s-4);  text-wrap: balance; }
.bos-onboard__copy p { font-size: var(--t-lg); line-height: 1.6; color: var(--bos-muted); }
.bos-onboard__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); margin-top: var(--s-8); }
.bos-textlink { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); }
.bos-textlink .bos-icon { width: 16px; height: 16px; }
.bos-onboard__list { counter-reset: onboard; display: grid; gap: 0; }
.bos-onboard__list li {
  counter-increment: onboard; position: relative;
  padding: var(--s-4) 0 var(--s-4) 48px; border-top: 1px solid var(--bos-line);
  font-size: var(--t-base); line-height: 1.55; color: var(--bos-muted);
}
.bos-onboard__list li:first-child { border-top: 0; }
.bos-onboard__list li::before {
  content: counter(onboard); position: absolute; left: 0; top: calc(var(--s-4) - 2px);
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--t-sm); font-weight: 600; color: var(--bos-text);
  background: var(--bos-surface); border: 1px solid var(--bos-line-strong);
}
.bos-onboard__list strong { color: var(--bos-text); }


/* ── FAQ ── */
.bos-faq { border-top: 1px solid var(--bos-line-strong); }
.bos-faq details { border-bottom: 1px solid var(--bos-line-strong); }
.bos-faq summary { padding: var(--s-5) 0; font-size: var(--t-lg); letter-spacing: -0.01em; }
.bos-faq details p { padding: 0 var(--s-8) var(--s-6) 0; color: var(--bos-muted); line-height: 1.7; }


/* ── Get started: demo + assessment ── */
.bos-section--start { overflow: hidden; isolation: isolate; background: var(--bos-tint); }
.bos-start__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30rem 24rem at 82% 30%, rgba(232, 80, 42, 0.20), transparent 70%),
    radial-gradient(26rem 22rem at 60% 90%, rgba(90, 120, 230, 0.16), transparent 70%);
}
.bos-start { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.bos-start__copy h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.06; margin-bottom: var(--s-4); text-wrap: balance; }
.bos-start__copy p { font-size: var(--t-lg); line-height: 1.6; color: var(--bos-muted); }
.bos-start__promise { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--bos-line-strong); font-size: var(--t-base) !important; color: var(--bos-text) !important; }

.bos-forms { border-radius: 26px; padding: clamp(1.25rem, 3vw, 2rem); }
.bos-switch { margin-bottom: var(--s-6); }
.bos-form { display: grid; gap: var(--s-5); }
.bos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.bos-grid__full { grid-column: 1 / -1; }
.bos-optional { font-weight: 400; color: var(--bos-faint); }
.bos .form-label { color: var(--bos-text); }
.bos .form-input, .bos .form-select, .bos .form-textarea {
  background-color: var(--bos-surface); border-color: var(--bos-line-strong); color: var(--bos-text);
  border-radius: 12px; font-size: 16px;
}
.bos .form-textarea { min-height: 96px; }
.bos .form-select { padding-right: 38px; }

.bos-step { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--s-4); }
.bos-step legend { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; margin-bottom: var(--s-4); padding: 0; color: var(--bos-text); }
.bos-form.is-stepped .bos-step:not(.is-current) { display: none; }
.bos-progress { height: 4px; border-radius: 4px; background: var(--bos-line); overflow: hidden; display: none; }
.bos-progress__fill { display: block; height: 100%; width: 33.33%; background: var(--accent); border-radius: 4px; transition: width 0.35s var(--bos-ease); }
.bos-progress__label { font-size: var(--t-xs); color: var(--bos-faint); font-weight: 500; margin-top: calc(var(--s-3) * -1); display: none; }
.bos-form.is-stepped .bos-progress, .bos-form.is-stepped .bos-progress__label { display: block; }

.bos-check { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-2); font-size: var(--t-sm); color: var(--bos-muted); cursor: pointer; }
.bos-check input { width: 18px; height: 18px; accent-color: var(--accent); }

.bos-options { display: flex; flex-wrap: wrap; gap: 8px; }
.bos-option { position: relative; cursor: pointer; }
.bos-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bos-option span {
  display: block; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--bos-line-strong); background: var(--bos-surface);
  font-size: var(--t-sm); color: var(--bos-text);
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
}
.bos-option:hover span { border-color: var(--bos-muted); }
.bos-option input:checked + span { border-color: var(--accent); background: var(--accent); color: #FFFFFF; }
.bos-options--cards .bos-option input:checked + span { background: var(--accent-glow); color: var(--bos-muted); box-shadow: 0 0 0 1px var(--accent); }
.bos-option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.bos-options--cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bos-options--cards .bos-option span { border-radius: 14px; padding: 12px 14px; height: 100%; line-height: 1.4; color: var(--bos-muted); }
.bos-options--cards strong { display: block; color: var(--bos-text); font-weight: 600; margin-bottom: 2px; }

.bos-form__nav { display: flex; gap: var(--s-3); justify-content: flex-end; }
.bos-form__nav .btn { min-width: 120px; justify-content: center; }
.bos .btn--outline-dark { color: var(--bos-text); border-color: var(--bos-line-strong); }
.bos .form-msg { border-radius: 12px; }

.bos-done { text-align: center; padding: var(--s-10) var(--s-4); }
.bos-done:focus { outline: none; }
.bos-done__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--bos-green-soft); color: var(--bos-green); margin-bottom: var(--s-5); }
.bos-done__icon .bos-icon { width: 28px; height: 28px; }
.bos-done h3 { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.02em; margin-bottom: var(--s-3); }
.bos-done p { color: var(--bos-muted); margin-inline: auto; }


/* ── Responsive ── */
@media (max-width: 1080px) {
  .bos-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bos-how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .bos-hero__inner, .bos-trades, .bos-onboard, .bos-start { grid-template-columns: minmax(0, 1fr); }
  .bos-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bos-flow::before { display: none; }
  .bos-flows { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .bos-plans { grid-template-columns: minmax(0, 1fr); }
  .bos-inbox { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .bos-inbox__detail { border-left: 0; border-top: 1px solid var(--bos-line); padding: var(--s-5) 4px 4px; }
  .bos-report__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bos-fine__body { grid-template-columns: minmax(0, 1fr); }
  .bos-options--cards { grid-template-columns: minmax(0, 1fr); }
  .bos-plan__tagline { min-height: 0; }
}
@media (max-width: 560px) {
  .bos-features, .bos-how { grid-template-columns: minmax(0, 1fr); }
  .bos-grid { grid-template-columns: minmax(0, 1fr); }
  .bos-hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .bos-flow { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .bos-flow__step { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: var(--s-4); }
  .bos-demo__panel { padding: 12px; }
  .bos-demo__tabs { margin: 12px 12px 0; display: flex; }
  .bos-demo__tabs button { flex: 1; padding: 7px 8px; }
  .bos-demo__fict { display: none; }
  .bos-bar { grid-template-columns: 96px minmax(0, 1fr) 28px; }
  .bos-table th, .bos-table td { padding: 10px 10px; }
  .bos-switch { display: flex; }
  .bos-switch button { flex: 1; }
  .bos-form__nav .btn { flex: 1 1 auto; min-width: 0; white-space: normal; text-align: center; line-height: 1.25; }
  .bos-form__nav [data-step-back] { flex: 0 0 auto; min-width: 88px; }
  .bos-faq details p { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bos .reveal, .bos .reveal-group > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .bos *, .bos *::before, .bos *::after { transition-duration: 0.01ms !important; animation: none !important; }
}