/* Feature Store: isolated components on the established Frozion Bootstrap base. */
:root { --fs-nav-height: 66px; }
.fs-hero { padding:32px 0 0; background: radial-gradient(ellipse at 88% 20%, #f2f1ff 0, #f8fafa 32%, #ffffff 68%); }
.fs-breadcrumb { display: flex; flex-wrap: wrap; gap:8px 16px; font-size:12px; margin-bottom:56px; color: #626a70; }
.fs-breadcrumb a { color: inherit; }
.fs-hero h1 { font-size:clamp(3rem, 5.15vw, 4.5rem); margin:24px 0 24px; }
.fs-hero-lead { font-size:20px; line-height: 1.65; max-width: 610px; color: #424a50; }
.fs-hero-support { font-size:14px; line-height: 1.85; max-width: 600px; }
.fs-foundation { margin-top:64px; border-top: 1px solid var(--line); padding:24px 0 32px; display: flex; justify-content: space-between; flex-wrap: wrap; gap:16px 24px; font-size:12px; }
.fs-foundation > span { color: #626a70; }
.fs-foundation strong { font-weight: 500; }
.fs-cover { background: #ffffff; border: 1px solid #e1ddff; border-radius: 15px; box-shadow: 0 22px 65px #2f1d990d; overflow: hidden; }
.fs-cover figcaption { padding:16px 24px; display: flex; justify-content: space-between; gap:16px; font-size:12px; letter-spacing: .8px; color: #626a70; border-bottom: 1px solid var(--line); background: #f8fafa; }
.fs-cover figcaption span:last-child { letter-spacing: 0; }
.fs-cover-context { display: flex; justify-content: space-between; gap:16px; padding:16px 24px; font-size:12px; border-bottom: 1px solid var(--line); }
.fs-cover-context b { color: var(--ink); font-weight: 600; }
.fs-cover-list { padding:6px 24px; }
.fs-cover-fact { display: grid; grid-template-columns: 1fr auto; gap:16px; padding:16px 0; border-bottom: 1px solid #f2f1ff; align-items: center; }
.fs-cover-fact:last-child { border: 0; }
.fs-cover-fact span { font-size:12px; color: #424a50; }
.fs-cover-fact small { display: block; font-size:12px; color: #626a70; margin-top:4px; }
.fs-cover-fact strong { font-size:24px; letter-spacing: -.04em; color: #1f1266; font-weight: 500; }
.fs-cover-snapshot { margin:0 24px 24px; padding:8px 16px; border: 1px solid #e1ddff; border-radius: 6px; color: #4128cc; background: #f2f1ff; display: flex; justify-content: space-between; flex-wrap: wrap; gap:6px; font-size:12px; }
.fs-cover-consumers { background: #f8fafa; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3,1fr); text-align: center; padding:24px 8px; }
.fs-cover-consumers span { font-size:12px; color: #4128cc; border-right: 1px solid #e1ddff; }
.fs-cover-consumers span:last-child { border: 0; }
.fs-cover-consumers small { display: block; font-size:12px; margin-top:5px; color: #626a70; }
.fs-nav { position: sticky; top: var(--header-height); z-index: 1020; background: #ffffff; border-block: 1px solid var(--line); box-shadow: 0 5px 12px #120a3d04; }
.fs-nav-links { display: grid; grid-template-columns: repeat(5,1fr); }
.fs-nav-links a { display: flex; gap:8px; align-items: center; min-height: 66px; padding:16px 16px; font-size:12px; color: #626a70; border-bottom: 3px solid transparent; }
.fs-nav-links a span { font-size:12px; color:#626a70; }
.fs-nav-links a.active { color: var(--brand); border-color: var(--brand); background: linear-gradient(0deg,#f2f1ff,transparent); }
.fs-nav-links a:hover { color: var(--brand); background-color: #f8fafa; }
.fs-nav-mobile { display: none; padding:16px 0; }
.fs-section { padding:96px 0; scroll-margin-top: calc(var(--header-height) + var(--fs-nav-height) + 22px); }
.fs-section h2 { font-size:clamp(2rem,3.35vw,3rem); }
.fs-section h3 { font-size:20px; }
.fs-section p { font-size:14px; line-height: 1.85; }
.fs-section .lead-copy { font-size:20px; line-height: 1.65; }
.fs-wash { background: #f8fafa; }
.fs-heading { margin-bottom:48px; }
.fs-label { display: block; font-size:12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #626a70; }
.fs-steps { display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid var(--line); }
.fs-steps > div { padding:32px 32px; border-right: 1px solid var(--line); }
.fs-steps > div:first-child { padding-left:0; }
.fs-steps > div:last-child { padding-right:0; border: 0; }
.fs-steps h3 { margin:16px 0 16px; }
.fs-steps p { font-size:14px; margin:0; }
.fs-reuse { margin-top:48px; display: grid; grid-template-columns: 1fr 1fr; gap:0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.fs-reuse > div { padding:32px 32px; }
.fs-reuse > div:last-child { background: #f2f1ff; border-left: 1px solid var(--line); }
.fs-reuse h3 { font-size:16px; margin:16px 0; }
.fs-equation { font-size:14px !important; color: #626a70; margin-bottom:16px; }
.fs-reuse p:last-child { font-size:12px; margin-bottom:0; }
.fs-note { font-size:12px !important; line-height: 1.7 !important; color: #626a70; margin-top:16px; }
.fs-demo { background: #ffffff; border: 1px solid #e1ddff; border-radius: 14px; overflow: hidden; box-shadow: 0 16px 55px #2f1d9907; }
.fs-demo-toolbar { display: flex; justify-content: space-between; gap:24px; align-items: center; padding:24px 24px; background: #f2f1ff; border-bottom: 1px solid var(--line); }
.fs-demo-toolbar h3 { font-size:16px; margin:5px 0 0; }
.fs-demo-toolbar .form-select { font-size:12px; min-width: 215px; border-color: #e1ddff; background-color: #ffffff; }
.fs-demo-toolbar label { font-size:12px; display: block; margin-bottom:5px; color: #626a70; }
.fs-demo-body { padding:24px; }
.fs-demo-meta { display: flex; flex-wrap: wrap; gap:8px 16px; font-size:12px; padding-bottom:24px; }
.fs-demo-meta strong { font-weight: 500; }
.fs-badge { display: inline-flex; align-items: center; gap:6px; font-size:12px; font-weight: 500; background: #eef1f2; color: #007260; border: 1px solid #e6fffa; border-radius: 5px; padding:4px 8px; line-height: 1.5; white-space: nowrap; }
.fs-badge.is-warning { background: #fff9e6; border-color: #fff0bf; color: #664200; }
.fs-badge.is-denied { background: #ffecee; border-color: #ffd2d7; color: #701024; }
.fs-badge.is-neutral { background: #f2f1ff; border-color: #e1ddff; color: #626a70; }
.fs-table { width: 100%; border-collapse: collapse; font-size:12px; }
.fs-table caption { color: #626a70; font-size:12px; caption-side: top; padding:0 0 16px; }
.fs-table thead th { font-size:12px; letter-spacing: .7px; text-transform: uppercase; font-weight: 600; color: #626a70; background: #f8fafa; padding:16px 16px; border-block: 1px solid var(--line); }
.fs-table th, .fs-table td { padding:16px 16px; vertical-align: middle; border-bottom: 1px solid var(--line); }
.fs-table tbody th { font-weight: 500; color: var(--ink); }
.fs-table th:first-child { padding-left:0; width: 34%; }
.fs-table thead th:first-child { padding-left:16px; }
.fs-table td:last-child { padding-right:0; }
.fs-table code { display: block; font-size:12px; color: #626a70; font-weight: 400; margin-top:4px; overflow-wrap: anywhere; }
.fs-table td strong { font-size:16px; color: #1f1266; font-weight: 600; white-space: nowrap; }
.fs-table td small { font-size:12px; display: block; margin-top:4px; }
.fs-demo .fs-definition-toggle { color: var(--brand); font-size:12px; padding:16px 0 0; background: transparent; border: 0; font-weight: 500; text-align: left; }
.fs-definition-toggle::after { content: ' +'; }
.fs-definition-toggle[aria-expanded=true]::after { content: ' −'; }
.fs-definitions { background: #f8fafa; padding:16px; margin-top:16px; border: 1px solid var(--line); border-radius: 7px; }
.fs-definitions p { font-size:12px; margin-bottom:16px; }
.fs-definitions p:last-child { margin:0; }
.fs-gate { margin-top:24px; padding:16px 24px; border: 1px solid #e1ddff; border-left: 3px solid var(--brand); background: #f2f1ff; border-radius: 6px; display: flex; justify-content: space-between; gap:24px; align-items: center; }
.fs-gate.is-warning { background: #ffffff; border-color: #fff0bf; border-left-color: #996500; }
.fs-gate.is-denied { background: #f8fafa; border-color: #ffd2d7; border-left-color: #701024; }
.fs-gate h4 { font-size:16px; letter-spacing: -.01em; margin:0 0 6px; }
.fs-gate p { font-size:12px; margin:0; line-height: 1.75; }
.fs-gate .btn { white-space: nowrap; font-size:12px; flex: 0 0 auto; }
.fs-snapshot { display: flex; justify-content: space-between; gap:16px; flex-wrap: wrap; margin:32px 0 16px; font-size:12px; }
.fs-snapshot strong { color: #1f1266; font-weight: 600; }
.fs-consumers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.fs-consumer { padding:24px; border-right: 1px solid var(--line); }
.fs-consumer:last-child { border: 0; }
.fs-consumer .fs-label { font-size:12px; }
.fs-consumer h4 { font-size:16px; margin:8px 0 16px; }
.fs-consumer .fs-consumer-values { font-size:12px; font-weight: 500; color: #1f1266; margin-bottom:8px; }
.fs-consumer p { font-size:12px; margin:0; }
.fs-consumer small { display: block; padding-top:16px; font-size:12px; color: #626a70; }
.fs-demo-footer { background: #f8fafa; border-top: 1px solid var(--line); padding:16px 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap:8px 16px; font-size:12px; color: #626a70; }
.fs-reset { background: none; border: 0; color: var(--brand); font-size:12px; padding:0; text-decoration: underline; text-underline-offset: 3px; }
.fs-timing { margin:40px 0 48px; border: 1px solid var(--line); border-radius: 12px; display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; }
.fs-clock { padding:24px 24px; border-right: 1px solid var(--line); background: #f8fafa; }
.fs-clock:last-child { border: 0; background: #f2f1ff; }
.fs-clock strong { font-size:24px; display: block; margin:8px 0 6px; color: #1f1266; letter-spacing: -.04em; }
.fs-clock p { font-size:12px; margin:0; }
.fs-callout { border-left: 3px solid #beb6ff; padding:7px 0 7px 24px; }
.fs-callout p { margin-bottom:8px; }
.fs-callout p:last-child { margin-bottom:0; }
.fs-states { margin-top:48px; display: grid; grid-template-columns: repeat(4,1fr); gap:24px 32px; }
.fs-states > div { border-top: 1px solid var(--line); padding-top:16px; }
.fs-states h4 { font-size:16px; letter-spacing: .02em; margin:0 0 8px; }
.fs-states p { font-size:12px; margin:0; }
.fs-contract { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.fs-contract > div { padding:24px 24px; display: grid; grid-template-columns: 125px 1fr; gap:16px; border-bottom: 1px solid var(--line); }
.fs-contract > div:last-child { border: 0; }
.fs-contract dt { font-weight: 500; color: #4128cc; font-size:12px; }
.fs-contract dd { font-size:12px; margin:0; line-height: 1.8; }
.fs-subsection { margin-top:64px; padding-top:48px; border-top: 1px solid var(--line); }
.fs-check-list { padding:0; list-style: none; }
.fs-check-list li { position: relative; padding:8px 0 8px 24px; border-bottom: 1px solid var(--line); font-size:14px; }
.fs-check-list li::before { content: '✓'; position: absolute; left: 0; color: var(--brand); font-size:12px; }
.fs-related { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: 12px; margin-top:40px; overflow: hidden; }
.fs-related a { padding:24px; border-right: 1px solid var(--line); color: var(--body); }
.fs-related a:last-child { border: 0; }
.fs-related a:hover { background: #f2f1ff; }
.fs-related strong { display: block; font-size:16px; margin-bottom:16px; }
.fs-related span { font-size:12px; line-height: 1.7; display: block; }
.fs-related b { display: block; margin-top:16px; font-size:12px; font-weight: 500; color: var(--brand); }
.fs-download { margin-top:24px; font-size:12px !important; }
@media (max-width: 991px) {
  .fs-breadcrumb { margin-bottom:32px; }
  .fs-hero h1 { font-size:clamp(3rem,7vw,4.5rem); }
  .fs-cover { max-width: 620px; }
  .fs-foundation { margin-top:48px; }
  .fs-section { padding:64px 0; }
  .fs-nav-links { display: none; }
  .fs-nav-mobile { display: flex; align-items: center; gap:16px; }
  .fs-nav-mobile label { font-size:12px; white-space: nowrap; }
  .fs-nav-mobile select { font-size:12px; }
  .fs-consumer { padding:16px; }
  .fs-steps > div { padding:24px 16px; }
  .fs-clock { padding:24px 16px; }
}
@media (max-width: 767px) {
  .fs-hero h1 { font-size:3rem; }
  .fs-hero-lead { font-size:16px; }
  .fs-foundation { display: grid; grid-template-columns: 1fr 1fr; gap:16px; font-size:12px; }
  .fs-foundation > span { grid-column: 1/-1; }
  .fs-steps, .fs-reuse, .fs-consumers, .fs-related { grid-template-columns: 1fr; }
  .fs-steps > div { padding:24px 0 !important; border-right: 0; border-bottom: 1px solid var(--line); }
  .fs-steps > div:last-child { border-bottom: 0; }
  .fs-reuse > div { padding:24px; }
  .fs-reuse > div:last-child { border-left: 0; border-top: 1px solid var(--line); }
  .fs-demo-toolbar { flex-direction: column; align-items: stretch; padding:24px 16px; gap:16px; }
  .fs-demo-body { padding:24px 16px; }
  .fs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fs-table, .fs-table tbody { display: block; }
  .fs-table caption { display: block; }
  .fs-table tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); padding:16px 0; gap:16px 8px; }
  .fs-table th, .fs-table td { padding:0 !important; border: 0; }
  .fs-table tbody th { grid-column: 1/-1; width: auto !important; }
  .fs-table td:last-child { grid-column: 1/-1; }
  .fs-table td::before { content: attr(data-label); display: block; font-size:12px; text-transform: uppercase; letter-spacing: .5px; color: #626a70; margin-bottom:3px; }
  .fs-gate { flex-direction: column; align-items: flex-start; padding:16px; gap:16px; }
  .fs-consumer { padding:24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .fs-demo-footer { padding:16px 16px; }
  .fs-timing { grid-template-columns: 1fr 1fr; }
  .fs-clock { border-bottom: 1px solid var(--line); }
  .fs-clock:nth-child(2) { border-right: 0; }
  .fs-clock:nth-child(3) { border-bottom: 0; }
  .fs-states { grid-template-columns: 1fr 1fr; }
  .fs-contract > div { grid-template-columns: 1fr; gap:6px; padding:16px 24px; }
  .fs-subsection { margin-top:48px; padding-top:40px; }
  .fs-related a { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { .fs-nav, .fs-demo-toolbar select, .fs-reset, #fs-refresh { display: none !important; } .fs-section { padding:32px 0; } .fs-hero { background: #ffffff; } }