/* T29 Functional hub (Figma 47:2959). Page layout only; tokens from css/v2. */
.psb .psb-icon { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.125em; fill: currentColor; } /* shared-fix candidate */

.fn-hero { padding: 40px 0 48px; }
.psb .fn-title { font-size: clamp(2.5rem, 1.4rem + 4vw, 4.75rem); line-height: 1.05; max-width: 1240px; }
.fn-lead { max-width: 720px; }

.fn-law { background: var(--sky-100); border-top: var(--stroke); color: var(--ink-900); }
:root[data-theme="dark"] .fn-law { background: var(--sky-700); color: var(--cream-50); }
.fn-law__inner { display: flex; gap: 16px; align-items: baseline; padding-block: 16px; }
.fn-law__tag { flex: none; font: 500 11px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sky-600); }
:root[data-theme="dark"] .fn-law__tag { color: var(--sky-300); }
.fn-law p { font-size: var(--fs-body-s); font-weight: 600; }

.fn-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.psb-meter.fn-row { grid-template-columns: 56px 190px auto 110px minmax(0, 1fr) auto; gap: 16px 24px; padding: 14px 24px 14px 16px; border-radius: var(--radius-row); }
.fn-row__disc { display: grid; place-items: center; width: 56px; height: 56px; border: var(--stroke); border-radius: 50%; background: var(--media-bg, var(--bg-surface)); }
.fn-row__disc img { width: 76%; height: auto; }
.psb .fn-row__name { font: 400 21px/1.2 var(--font-display); }
.fn-row .psb-meter__dots i { width: 28px; height: 14px; }
.fn-row__grade { font: 500 13px/1.3 var(--font-mono); color: var(--text-primary); }
.fn-row__basis { font-size: 13px; color: var(--text-secondary); }
.fn-row__go { font-size: 13px; font-weight: 700; color: var(--text-brand); text-decoration: none; white-space: nowrap; }
.fn-row__go:hover { text-decoration: underline; }
.fn-key { margin-top: 20px; }

.fn-buy { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 48px; align-items: start; }
.fn-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; color: var(--text-secondary); }
.fn-checks li { display: flex; gap: 10px; align-items: baseline; }
.fn-checks .psb-icon { color: var(--text-brand); }

/* shared specificity workarounds (see T10) */
.psb h3.psb-card__title { font: 700 19px/1.32 var(--font-body); }
.psb .psb-disclosure { display: block; }
.psb .psb-disclosure::before { margin-right: 8px; }

@media (max-width: 1100px) {
  .psb-meter.fn-row { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .fn-row__name { grid-column: 2 / 3; }
  .fn-row .psb-meter__dots { grid-column: 3; }
  .fn-row__grade, .fn-row__basis { grid-column: 2 / -1; }
  .fn-row__go { grid-column: 2 / -1; }
  .fn-buy { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 600px) {
  .psb-meter.fn-row { grid-template-columns: 48px minmax(0, 1fr); gap: 8px 14px; padding: 16px; }
  .fn-row__disc { width: 48px; height: 48px; grid-row: span 2; }
  .fn-row .psb-meter__dots { grid-column: 2; }
  .fn-law__inner { flex-direction: column; gap: 6px; }
}