/* Business Features pages (/features, /features/{slug}). Loaded after site.css; scoped to .ft. */
.ft {
  --ft-navy: #0b1f3a; --ft-navy-2: #14305a; --ft-ivory: #faf7f0; --ft-ivory-2: #f2ede1; --ft-gold: #b8892b; --ft-gold-ink: #7a5a12;
  --ft-ink: #14213d; --ft-muted: #4a5568; --ft-line: #ddd5c3; --ft-card: #ffffff; --ft-ok: #1b6b4a; --ft-ok-bg: #e3f1ea;
  --ft-warn-bg: #f7ecd2; --ft-off: #5b6475; --ft-off-bg: #ecebe6; --ft-link: #14305a;
  background: var(--ft-ivory); color: var(--ft-ink);
}
@media (prefers-color-scheme: dark) {
  .ft {
    --ft-navy: #08142a; --ft-navy-2: #0f2347; --ft-ivory: #0c1424; --ft-ivory-2: #111b30; --ft-gold: #d9b15a; --ft-gold-ink: #e6c37a;
    --ft-ink: #ecebe4; --ft-muted: #b4bccb; --ft-line: #263552; --ft-card: #14203a; --ft-ok: #7be0b0; --ft-ok-bg: #12382b;
    --ft-warn-bg: #3a2f14; --ft-off: #a3adc0; --ft-off-bg: #1c2740; --ft-link: #9db8f0;
  }
}
.ft a { color: var(--ft-link); }
.ft a:focus-visible { outline: 3px solid var(--ft-gold); outline-offset: 2px; }
.ft h1, .ft h2, .ft h3 { color: var(--ft-ink); letter-spacing: -0.01em; }

.ft-hero { background: var(--ft-navy); color: #f6f3ea; padding: 64px 0 48px; border-bottom: 4px solid var(--ft-gold); }
.ft-hero h1 { color: #fff; font-size: clamp(1.9rem, 4.6vw, 3rem); max-width: 22ch; }
.ft-hero a { color: #f3d9a0; }
.ft-eyebrow { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8125rem; font-weight: 700; color: #e6c37a; margin: 0 0 12px; }
.ft-lead { font-size: 1.1875rem; max-width: 62ch; color: #e4e8f0; margin: 0 0 24px; }
.ft-hero--detail { padding: 40px 0 36px; }
.ft-hero--detail .crumbs ol { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 20px; font-size: 0.875rem; }
.ft-hero--detail .crumbs li + li::before { content: "/"; margin-right: 8px; opacity: 0.6; }
.ft-banner { background: var(--ft-warn-bg); color: var(--ft-ink); border-left: 4px solid var(--ft-gold); padding: 12px 16px; border-radius: 6px; max-width: 62ch; }

.ft-jump ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ft-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; text-decoration: none; color: #fff; font-weight: 600; font-size: 0.9375rem; }
.ft-jump a:hover { background: rgba(255, 255, 255, 0.12); }

.ft-cat { padding: 56px 0; background: var(--ft-ivory); }
.ft-cat--alt { background: var(--ft-ivory-2); border-top: 1px solid var(--ft-line); border-bottom: 1px solid var(--ft-line); }
.ft-cat h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 8px; padding-left: 14px; border-left: 4px solid var(--ft-gold); }
.ft-intro { max-width: 68ch; color: var(--ft-muted); font-size: 1.0625rem; margin: 0 0 28px; }
.ft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ft-card { background: var(--ft-card); border: 1px solid var(--ft-line); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.ft-card h3 { font-size: 1.125rem; margin: 0; }
.ft-card h3 a { text-decoration: none; }
.ft-card h3 a:hover { text-decoration: underline; }
.ft-card p { margin: 0; color: var(--ft-muted); }
.ft-card-meta { margin-top: auto !important; padding-top: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--ft-gold-ink) !important; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ft-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: var(--ft-warn-bg); color: var(--ft-ink); border: 1px solid var(--ft-gold); }
.ft-chip--future { background: var(--ft-off-bg); border-color: var(--ft-line); }
.ft-more { margin-top: 20px; font-weight: 600; }
.ft-soon { background: var(--ft-ivory-2); border-top: 2px dashed var(--ft-gold); }
.ft-soon .ft-card, .ft-future .ft-card { border-style: dashed; background: transparent; }

.ft-body { padding-top: 40px; padding-bottom: 56px; }
.ft-block { margin: 0 0 36px; }
.ft-block h2, .ft-benefit h2, .ft-example h2, .ft-next h2 { font-size: 1.375rem; margin-bottom: 12px; }
.ft-block p, .ft-benefit p, .ft-example p { max-width: 70ch; font-size: 1.0625rem; }
.ft-benefit { background: var(--ft-card); border: 1px solid var(--ft-line); border-left: 4px solid var(--ft-gold); border-radius: 8px; padding: 20px 24px; margin: 0 0 36px; }
.ft-benefit p { margin: 0; font-size: 1.125rem; font-weight: 500; }
.ft-example { background: var(--ft-ivory-2); border-radius: 8px; padding: 20px 24px; margin: 0 0 36px; }
.ft-example p { margin: 0; }
.ft-steps, .ft-list { padding-left: 1.25rem; max-width: 70ch; }
.ft-steps li, .ft-list li { margin-bottom: 8px; font-size: 1.0625rem; }
.ft-state { display: inline-block; padding: 2px 10px; border-radius: 6px; font-weight: 600; font-size: 0.875rem; }
.ft-state::before { margin-right: 6px; font-weight: 700; }
.ft-state--included { background: var(--ft-ok-bg); color: var(--ft-ok); }
.ft-state--included::before { content: "\2713"; }
.ft-state--add_on { background: var(--ft-warn-bg); color: var(--ft-gold-ink); }
.ft-state--add_on::before { content: "+"; }
.ft-state--not_included, .ft-state--none { background: var(--ft-off-bg); color: var(--ft-off); }
.ft-state--not_included::before, .ft-state--none::before { content: "\2013"; }
.ft-state--coming_soon { background: var(--ft-warn-bg); color: var(--ft-ink); border: 1px dashed var(--ft-gold); }
.ft-detail { display: block; font-size: 0.8125rem; color: var(--ft-muted); margin-top: 2px; }
.ft-table { width: 100%; border-collapse: collapse; background: var(--ft-card); border: 1px solid var(--ft-line); border-radius: 8px; }
.ft-table th, .ft-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--ft-line); vertical-align: top; }
.ft-table thead th { background: var(--ft-navy); color: #fff; font-size: 0.875rem; }
.ft-addons { list-style: none; padding: 0; }
.ft-addons li { background: var(--ft-card); border: 1px solid var(--ft-line); border-radius: 8px; padding: 16px; margin-bottom: 12px; }
.ft-related { list-style: none; padding: 0; display: grid; gap: 10px; }
.ft-related li { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; background: var(--ft-card); border: 1px solid var(--ft-line); border-radius: 8px; }
.ft-related li a { font-weight: 600; }
.ft-related li span { color: var(--ft-muted); font-size: 0.9375rem; }
.ft-next { background: var(--ft-navy); color: #f6f3ea; border-radius: 12px; padding: 32px; margin: 40px 0 16px; }
.ft-next h2, .ft-next p { color: #fff; }
.ft-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 0 !important; }
.ft-next .btn-secondary, .ft-next .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.5); background: transparent; box-shadow: none; }
.ft-next .btn-primary { background: var(--ft-gold); color: #0b1f3a; }
.ft-back { margin-top: 24px; }

/* a table with many columns is always stacked, one card per plan */
.ft-table--wide, .ft-table--wide tbody, .ft-table--wide tr, .ft-table--wide th, .ft-table--wide td { display: block; width: 100%; }
.ft-table--wide thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ft-table--wide tr { padding: 8px 0; border-bottom: 2px solid var(--ft-line); }
.ft-table--wide th[scope="row"] { border-bottom: 0; font-size: 1.0625rem; }
.ft-table--wide td { border-bottom: 0; padding: 6px 14px; }
.ft-table--wide td::before { content: attr(data-label); display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ft-muted); }

@media (max-width: 900px) {
  .ft-table, .ft-table tbody, .ft-table tr, .ft-table th, .ft-table td { display: block; width: 100%; }
  .ft-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ft-table tr { padding: 8px 0; border-bottom: 2px solid var(--ft-line); }
  .ft-table th[scope="row"] { border-bottom: 0; font-size: 1.0625rem; }
  .ft-table td { border-bottom: 0; padding: 6px 14px; }
  .ft-table td::before { content: attr(data-label); display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ft-muted); }
}
@media (max-width: 720px) {
  .ft-hero { padding: 40px 0 32px; }
  .ft-cat { padding: 40px 0; }
  .ft-next { padding: 24px 20px; }
  .ft-actions .btn { width: 100%; }
}