/* Code generated by tools/dsgen from web/design-system/components/bundle.css (design system 1790993653-3c75 2026-10-02 https://claude.ai/artifact/Kos6rzJcPPiYcBHfgpe2Zh). DO NOT EDIT.
   The vendored bundle.css byte-for-byte, minus its Google Fonts import rule (R-DS-SRC-5a, D55d):
   Fraunces and Figtree are self-hosted by static/css/fonts.css (E01-S03). */

/* ───────── Base ───────── */
.fn, .fn-screen { font-family: var(--font-sans); color: var(--ink); font-size: 16px; line-height: 24px; -webkit-font-smoothing: antialiased; }
.fn *, .fn-screen * { box-sizing: border-box; }
.fn-screen { container: screen / inline-size; background: var(--ground); overflow: auto; scrollbar-width: thin; }
.fn-screen h1, .fn-screen h2, .fn-screen h3, .fn-screen p { margin: 0; }
.fn-display { font-family: var(--font-display); font-weight: 560; font-variation-settings: "opsz" 120; letter-spacing: -1px; }
.fn-h1 { font-family: var(--font-display); font-weight: 560; font-size: 40px; line-height: 44px; letter-spacing: -1px; font-variation-settings: "opsz" 120; }
.fn-h2 { font-family: var(--font-display); font-weight: 560; font-size: 26px; line-height: 32px; letter-spacing: -0.4px; font-variation-settings: "opsz" 72; }
.fn-h3 { font-size: 18px; line-height: 24px; font-weight: 650; }
.fn-lead { font-size: 17px; line-height: 27px; color: var(--ink-muted); }
.fn-muted { color: var(--ink-muted); }
.fn-small { font-size: 14px; line-height: 20px; }
.fn-eyebrow { font-size: 12px; line-height: 16px; font-weight: 650; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-muted); }
.fn-num { font-variant-numeric: tabular-nums; font-weight: 650; letter-spacing: -0.5px; }
.fn-i { flex: none; display: inline-block; vertical-align: middle; }
.fn-row { display: flex; align-items: center; gap: var(--space-3); }
.fn-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.fn-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.fn-stack-lg { display: flex; flex-direction: column; gap: var(--space-6); }
.fn-wrap { flex-wrap: wrap; }
@container screen (max-width: 759.98px) { .fn-hide-sm { display: none !important; } }
@container screen (min-width: 760px) { .fn-show-sm { display: none !important; } .fn-h1 { font-size: 52px; line-height: 56px; } .fn-h2 { font-size: 30px; line-height: 36px; } }
:where(.fn, .fn-screen) :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ───────── Button ───────── */
.fn-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0 18px; border-radius: var(--radius-md); border: 1px solid transparent; font: 600 15px/20px var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, transform .15s, box-shadow .15s; background: var(--pine); color: var(--on-pine); }
.fn-btn:hover { background: var(--pine-deep); }
.fn-btn:active { transform: translateY(1px); }
.fn-btn--clay { background: var(--clay); color: var(--on-clay); }
.fn-btn--clay:hover { background: var(--clay); box-shadow: var(--shadow-lift); }
.fn-btn--outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.fn-btn--outline:hover { background: var(--surface-sunk); }
.fn-btn--ghost { background: transparent; color: var(--pine); }
.fn-btn--ghost:hover { background: var(--pine-soft); }
.fn-btn--soft { background: var(--pine-soft); color: var(--pine); }
.fn-btn--soft:hover { background: var(--pine-soft); box-shadow: inset 0 0 0 1px var(--pine); }
.fn-btn--danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.fn-btn--sm { min-height: 36px; padding: 0 12px; font-size: 14px; border-radius: var(--radius-sm); }
.fn-btn--lg { min-height: 52px; padding: 0 24px; font-size: 16px; }
.fn-btn--block { width: 100%; }
.fn-btn--icon { width: 44px; padding: 0; }
.fn-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ───────── Badge ───────── */
.fn-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font: 650 12px/16px var(--font-sans); letter-spacing: .2px; background: var(--surface-sunk); color: var(--ink-muted); white-space: nowrap; }
.fn-badge .fn-i { width: 14px; height: 14px; }
:where(.fn-stack, .fn-stack-lg) > .fn-badge { align-self: flex-start; }
.fn-badge--pine, .fn-badge--success { background: var(--pine-soft); color: var(--success); }
.fn-badge--pine { color: var(--pine); }
.fn-badge--clay, .fn-badge--warning { background: var(--clay-soft); color: var(--warning); }
.fn-badge--clay { color: var(--clay); }
.fn-badge--sky { background: var(--sky-soft); color: var(--sky); }
.fn-badge--danger { background: var(--danger-soft); color: var(--danger); }
.fn-badge--wheat { background: var(--wheat); color: var(--on-wheat); }

/* ───────── Card ───────── */
.fn-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: var(--space-4); }
@container screen (min-width: 760px) { .fn-card { padding: var(--space-6); } }
.fn-card--flat { box-shadow: none; }
.fn-card--pine { background: var(--pine); color: var(--on-pine); border-color: transparent; }
.fn-card--pine .fn-muted, .fn-card--pine .fn-eyebrow { color: var(--on-pine); opacity: .82; }
.fn-card--sunk { background: var(--surface-sunk); border-color: transparent; box-shadow: none; }
.fn-card--link { transition: box-shadow .2s, transform .2s; }
.fn-card--link:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }

/* ───────── Field ───────── */
.fn-field { display: flex; flex-direction: column; gap: 6px; }
.fn-field > span { font-size: 14px; font-weight: 600; }
.fn-field small { color: var(--ink-muted); font-size: 13px; }
.fn-input { height: 46px; width: 100%; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 400 16px/24px var(--font-sans); }
.fn-input::placeholder { color: var(--ink-muted); }
.fn-input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.fn-input--error { border-color: var(--danger); }
.fn-search { position: relative; display: flex; align-items: center; }
.fn-search .fn-i { position: absolute; left: 12px; color: var(--ink-muted); }
.fn-search .fn-input { padding-left: 40px; background: var(--surface); }
.fn-seg { display: inline-flex; padding: 4px; gap: 4px; background: var(--surface-sunk); border-radius: var(--radius-pill); }
.fn-seg button { border: 0; background: transparent; color: var(--ink-muted); font: 600 14px/20px var(--font-sans); padding: 6px 14px; border-radius: var(--radius-pill); cursor: pointer; }
.fn-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-soft); }
.fn-range { width: 100%; accent-color: var(--pine); }

/* ───────── Stat ───────── */
.fn-stat { display: flex; flex-direction: column; gap: 6px; }
.fn-stat b { font-size: 26px; line-height: 32px; font-variant-numeric: tabular-nums; font-weight: 650; letter-spacing: -0.5px; }
@container screen (min-width: 760px) { .fn-stat b { font-size: 30px; line-height: 36px; } }
.fn-delta { font-size: 13px; font-weight: 600; color: var(--success); display: inline-flex; gap: 4px; align-items: center; }
.fn-delta--down { color: var(--danger); }

/* ───────── Progress ───────── */
.fn-progress { height: 10px; background: var(--surface-sunk); border-radius: var(--radius-pill); overflow: hidden; }
.fn-progress > span { display: block; height: 100%; background: var(--pine); border-radius: inherit; }
.fn-progress--wheat > span { background: var(--wheat); }
.fn-card--pine .fn-progress { background: var(--pine-deep); }
.fn-card--pine .fn-progress > span { background: var(--wheat); }
.fn-ring { position: relative; width: 120px; height: 120px; flex: none; }
.fn-ring svg { transform: rotate(-90deg); }
.fn-ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.fn-ring .track { stroke: var(--surface-sunk); }
.fn-ring .fill { stroke: var(--pine); }
.fn-card--pine .fn-ring .track { stroke: var(--pine-deep); }
.fn-card--pine .fn-ring .fill { stroke: var(--wheat); }
.fn-ring > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }

/* ───────── Avatar ───────── */
.fn-avatar { width: 36px; height: 36px; border-radius: var(--radius-pill); display: inline-grid; place-items: center; font: 650 13px/1 var(--font-sans); background: var(--clay-soft); color: var(--clay); flex: none; }
.fn-avatar--pine { background: var(--pine-soft); color: var(--pine); }
.fn-avatar--sky { background: var(--sky-soft); color: var(--sky); }
.fn-avatar--lg { width: 48px; height: 48px; font-size: 16px; }

/* ───────── Parcel card ───────── */
.fn-parcel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.fn-parcel:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.fn-art { position: relative; aspect-ratio: 16 / 10; background: var(--pine-soft); color: var(--pine); overflow: hidden; }
.fn-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fn-art--clay { background: var(--clay-soft); color: var(--clay); }
.fn-art--sky { background: var(--sky-soft); color: var(--sky); }
.fn-art--deep { background: var(--pine); color: var(--on-pine); }
.fn-art .fn-badge { position: absolute; top: 12px; left: 12px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-soft); }
.fn-art .fn-fav { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--clay); border: 0; }
.fn-parcel__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.fn-tags { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.fn-tags span { display: inline-flex; align-items: center; gap: 4px; }
.fn-tags .fn-i { width: 15px; height: 15px; }
.fn-price { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.fn-price b { font-size: 20px; font-variant-numeric: tabular-nums; }
.fn-price span { color: var(--ink-muted); font-size: 14px; }

/* ───────── Steps ───────── */
.fn-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fn-steps li { display: grid; grid-template-columns: 32px 1fr; gap: 0 var(--space-3); position: relative; padding-bottom: var(--space-4); }
.fn-steps li::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--line); }
.fn-steps li:last-child::before { display: none; }
.fn-steps li:last-child { padding-bottom: 0; }
.fn-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-sunk); color: var(--ink-muted); font: 650 13px/1 var(--font-sans); border: 2px solid var(--line); }
.fn-steps .is-done .fn-dot { background: var(--pine); color: var(--on-pine); border-color: var(--pine); }
.fn-steps .is-done::before { background: var(--pine); }
.fn-steps .is-now .fn-dot { background: var(--clay); color: var(--on-clay); border-color: var(--clay); box-shadow: 0 0 0 5px var(--clay-soft); }
.fn-steps li > div { padding-top: 4px; }

/* ───────── Table ───────── */
.fn-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 20px; }
.fn-table th { text-align: left; font-size: 12px; font-weight: 650; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-sunk); padding: 10px 12px; white-space: nowrap; }
.fn-table th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.fn-table th:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.fn-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.fn-table tr:hover td { background: var(--ground); }
.fn-table tr.is-selected td { background: var(--pine-soft); }
.fn-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.fn-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fn-person b { display: block; font-weight: 600; white-space: nowrap; }
.fn-person small { color: var(--ink-muted); font-size: 13px; white-space: nowrap; }
/* Table → list on phones */
.fn-list { display: flex; flex-direction: column; }
.fn-list > div { display: flex; align-items: center; gap: var(--space-3); padding: 12px 0; border-bottom: 1px solid var(--line); }
.fn-list > div:last-child { border-bottom: 0; }

/* ───────── Portal shell (member + admin) ───────── */
.fn-app { min-height: 100%; display: grid; grid-template-columns: 1fr; }
.fn-side { display: none; }
.fn-main { min-width: 0; display: flex; flex-direction: column; }
.fn-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: var(--space-3); padding: 12px var(--space-4); background: var(--surface); border-bottom: 1px solid var(--line); }
.fn-top .fn-search { flex: 1; max-width: 420px; }
.fn-icon-btn { position: relative; width: 40px; height: 40px; border-radius: var(--radius-pill); display: grid; place-items: center; background: transparent; border: 0; color: var(--ink); cursor: pointer; }
.fn-icon-btn:hover { background: var(--surface-sunk); }
.fn-icon-btn[data-dot]::after { content: ""; position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 2px var(--surface); }
.fn-content { padding: var(--space-4) var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.fn-tabbar { position: sticky; bottom: 12px; z-index: 4; margin: 0 12px 12px; display: flex; justify-content: space-around; padding: 6px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lift); }
.fn-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: var(--radius-pill); color: var(--ink-muted); text-decoration: none; font: 600 11px/14px var(--font-sans); }
.fn-tabbar a[aria-current] { color: var(--pine); background: var(--pine-soft); }
.fn-brand { display: inline-flex; align-items: center; gap: 0.26em; font-family: var(--font-display); font-weight: 650; font-size: 20px; letter-spacing: -0.3px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.fn-brand em { font-style: normal; color: var(--clay); }
.fn-nav { display: flex; flex-direction: column; gap: 2px; }
.fn-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); color: var(--ink-muted); text-decoration: none; font-weight: 550; font-size: 15px; }
.fn-nav a:hover { background: var(--surface); color: var(--ink); }
.fn-nav a[aria-current] { background: var(--pine); color: var(--on-pine); }
.fn-nav .fn-badge { margin-left: auto; height: 20px; padding: 0 8px; }
.fn-nav-label { padding: 16px 12px 6px; }
.fn-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.fn-grid--stats { grid-template-columns: 1fr 1fr; }
@container screen (min-width: 600px) {
  .fn-grid--2, .fn-grid--3 { grid-template-columns: 1fr 1fr; }
  .fn-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@container screen (min-width: 900px) {
  .fn-app { grid-template-columns: 248px 1fr; }
  .fn-app--admin { grid-template-columns: 232px 1fr; }
  .fn-side { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6) var(--space-4); background: var(--surface-sunk); }
  .fn-tabbar { display: none; }
  .fn-top { padding: 14px var(--space-8); }
  .fn-content { padding: var(--space-8); gap: var(--space-6); }
  .fn-grid { gap: var(--space-6); }
  .fn-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .fn-grid--4, .fn-grid--stats { grid-template-columns: repeat(4, 1fr); }
  .fn-split { grid-template-columns: 1.6fr 1fr; }
  .fn-split--even { grid-template-columns: 1fr 1fr; }
  .fn-split--wide { grid-template-columns: 2fr 1fr; }
}

/* ───────── Website ───────── */
.fn-site-nav { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 14px var(--space-4); background: var(--ground); border-bottom: 1px solid var(--line); }
.fn-site-nav nav { display: none; gap: var(--space-6); font-weight: 550; font-size: 15px; }
.fn-site-nav nav a { color: var(--ink); text-decoration: none; }
.fn-site-nav nav a:hover { color: var(--pine); }
.fn-section { padding: var(--space-12) var(--space-4); }
.fn-hero { display: grid; gap: var(--space-6); padding: var(--space-8) var(--space-4) var(--space-12); }
.fn-hero-art { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 280px; background: var(--pine); color: var(--on-pine); }
.fn-hero-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.fn-float { position: absolute; background: var(--surface); color: var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); padding: 12px 14px; display: flex; gap: 10px; align-items: center; font-size: 14px; line-height: 18px; }
.fn-trust { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); color: var(--ink-muted); font-size: 14px; }
.fn-trust span { display: inline-flex; gap: 6px; align-items: center; }
.fn-trust .fn-i { color: var(--pine); }
.fn-band { background: var(--pine-deep); color: var(--on-pine); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); display: grid; gap: var(--space-6); }
.fn-band .fn-muted { color: var(--on-pine); opacity: .85; }
.fn-num-badge { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--clay-soft); color: var(--clay); font: 650 16px/1 var(--font-display); }
.fn-quote { font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 400; font-variation-settings: "opsz" 48; }
.fn-footer { padding: var(--space-8) var(--space-4); border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; }
.fn-sticky-cta { position: sticky; bottom: 0; z-index: 3; display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; padding: 12px var(--space-4); background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-lift); }
@container screen (min-width: 760px) {
  .fn-site-nav { padding: 18px var(--space-8); }
  .fn-site-nav nav { display: flex; }
  .fn-section { padding: var(--space-16) var(--space-8); }
  .fn-hero { grid-template-columns: 1.05fr 1fr; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-8) var(--space-16); }
  .fn-hero-art { min-height: 440px; }
  .fn-band { grid-template-columns: 1.4fr 1fr; align-items: center; padding: var(--space-12); }
  .fn-footer { padding: var(--space-8); }
  .fn-sticky-cta { display: none; }
}

/* ───────── Charts (inline SVG) ───────── */
.fn-chart { width: 100%; height: auto; display: block; }
.fn-chart .grid { stroke: var(--line); stroke-width: 1; }
.fn-chart .bar { fill: var(--pine); }
.fn-chart .bar2 { fill: var(--wheat); }
.fn-chart .lineA { fill: none; stroke: var(--pine); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fn-chart .areaA { fill: var(--pine-soft); }
.fn-chart .lineB { fill: none; stroke: var(--clay); stroke-width: 2.5; stroke-dasharray: 5 5; stroke-linecap: round; }
.fn-chart text { fill: var(--ink-muted); font: 500 11px var(--font-sans); }
.fn-legend { display: flex; gap: var(--space-4); font-size: 13px; color: var(--ink-muted); flex-wrap: wrap; }
.fn-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ───────── Showcase frames (design-system previews only) ───────── */
.fn-showcase { margin: 0; background: var(--surface-sunk); font-family: var(--font-sans); }
.fn-stage { display: flex; gap: 40px; padding: 32px 40px; align-items: flex-start; }
.fn-device { flex: none; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lift); overflow: hidden; display: flex; flex-direction: column; }
.fn-device--desk { flex: 1; border-radius: 14px; }
.fn-device--phone { width: 390px; border-radius: 44px; border: 10px solid #101511; box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lift); }
.fn-device--desk .fn-screen { height: 860px; }
.fn-device--phone .fn-screen { height: 844px; }
.fn-chrome { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface-sunk); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-muted); }
.fn-chrome i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); opacity: .5; }
.fn-chrome span { margin: 0 auto; background: var(--surface); padding: 3px 16px; border-radius: var(--radius-pill); }
.fn-stage-label { font: 650 12px/16px var(--font-sans); letter-spacing: .6px; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px; }
@container screen (min-width: 900px) { .fn-aside { position: sticky; top: 96px; } }