/* biz.css: small business and care plan pages. Loaded after hub.css. Tokens only. */

.b-chips { display: flex; flex-wrap: wrap; gap: 8px var(--space-5); margin-top: clamp(24px, 3vw, 40px); padding-top: var(--space-5); border-top: 1px solid var(--line); color: var(--text-dim); font-weight: 600; }
.close .b-chips { border-top: 0; padding-top: 0; margin-top: var(--space-6); }
.b-chips li { position: relative; padding-left: 22px; }
.b-chips li::before { content: ""; position: absolute; left: 3px; top: 0.3em; width: 6px; height: 11px; border: solid var(--text-dim); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Split: heading left, examples right */
.b-split { display: grid; gap: var(--space-7); }
@media (min-width: 900px) { .b-split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-9); align-items: start; } .b-split .c-sechead { margin-bottom: 0; } }
.b-more { margin-top: var(--space-5); }
.b-quotes { border-top: 1px solid var(--text); }
.b-quotes li { padding: var(--space-5) 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); line-height: 1.3; letter-spacing: -0.015em; }

/* Columns */
.b-cols { display: grid; gap: var(--space-6) var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .b-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .b-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } .b-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .b-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.b-cols .c-col h3 { font-size: var(--step-1); }
.b-stats { margin-top: clamp(40px, 5vw, 72px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .b-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.b-stats .c-stat__num { font-size: var(--step-3); }
.b-sub { display: block; margin-top: 4px; font-weight: 400; color: var(--text-faint); font-size: 0.875rem; }

/* Plan and ladder */
.b-plan { display: grid; gap: var(--space-7); padding-top: 14px; }
@media (min-width: 960px) { .b-plan { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-9); align-items: start; } }
.b-period { color: var(--text-dim); margin-top: calc(var(--space-2) * -1); }
.b-period a, .b-note a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.b-note { color: var(--text-dim); font-size: 0.9375rem; }
.b-ladder { border-top: 1px solid var(--text); }
.b-ladder li { display: grid; gap: 2px; padding: var(--space-5) 0; border-bottom: 1px solid var(--line); }
.b-ladder span { font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.b-ladder b { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); letter-spacing: -0.02em; line-height: 1.15; }

.b-plans { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); padding-top: 14px; }
@media (min-width: 900px) { .b-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Comparison table */
.b-cmp { width: 100%; border-collapse: collapse; font-size: 1rem; }
.b-cmp th, .b-cmp td { text-align: left; vertical-align: top; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); line-height: 1.4; }
.b-cmp thead th { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); letter-spacing: -0.015em; border-bottom: 1px solid var(--text); padding-bottom: 14px; }
.b-cmp tbody th { font-weight: 700; width: 34%; }
.b-cmp tbody th span { display: block; margin-top: 2px; font-weight: 400; font-size: 0.875rem; color: var(--text-faint); }
.b-cmp td { color: var(--text-dim); }
.b-cmp td:last-child, .b-cmp th.is-us { color: var(--text); font-weight: 700; padding-left: 16px; border-left: 1px solid var(--text); }
@media (max-width: 759px) {
  .b-cmp, .b-cmp tbody { display: block; }
  .b-cmp thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  .b-cmp tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
  .b-cmp th, .b-cmp td { display: block; padding: 0; border: 0; width: auto; }
  .b-cmp tbody th { grid-column: 1 / -1; font-family: var(--font-display); font-size: var(--step-1); letter-spacing: -0.015em; width: auto; }
  .b-cmp td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
  .b-cmp td:last-child { padding-left: 0; border-left: 0; }
}