
.f-pa {
  padding: var(--f-space-xl) clamp(16px, 4vw, 48px);
}
.f-pa-join-next { padding-bottom: var(--f-space-l); }
.f-pa-inner {
  width: min(1200px, 100%);
  margin-inline: auto;
}
.f-pa-light {
  background: var(--brand-bg, #fcfcfc);
  color: var(--brand-ink, #333);
  --f-pa-ink: var(--brand-ink-strong, #1a1a1a);
  --f-pa-body: var(--brand-ink, #333);
  --f-pa-quiet: var(--f-quiet-ink);
  --f-pa-rule: color-mix(in oklab, var(--brand-ink, #333) 16%, transparent);
  --f-pa-mark: var(--brand-accent, #0074c8);
  --f-pa-accent-ink: var(--f-accent-ink);
}
.f-pa-dark {
  background: var(--brand-surface-dark, #1a1a1a);
  color: var(--brand-ink-on-dark, #fcfcfc);
  --f-pa-ink: var(--brand-ink-on-dark, #fcfcfc);
  --f-pa-body: color-mix(in oklab, var(--brand-ink-on-dark, #fcfcfc) 86%, var(--brand-surface-dark, #1a1a1a));
  --f-pa-quiet: color-mix(in oklab, var(--brand-ink-on-dark, #fcfcfc) 70%, var(--brand-surface-dark, #1a1a1a));
  --f-pa-rule: color-mix(in oklab, var(--brand-ink-on-dark, #fcfcfc) 18%, transparent);
  --f-pa-mark: var(--brand-accent-bright, var(--brand-accent, #0a99ff));
  --f-pa-accent-ink: var(--brand-ink-on-dark, #fcfcfc);
}
.f-pa h2,
.f-pa h3 { color: inherit; }
.f-pa-head {
  max-width: var(--f-measure-wide);
  margin: 0 auto var(--f-space-l);
  text-align: center;
}
.f-pa-kicker {
  margin: 0 0 var(--f-space-xs);
  max-width: none;
  font-size: var(--f-text-caption);
  line-height: var(--f-lh-small);
  letter-spacing: var(--f-track-eyebrow);
  text-transform: uppercase;
  color: var(--f-pa-accent-ink);
}
.f-pa-title {
  margin: 0;
  color: var(--f-pa-ink);
  text-wrap: balance;
}
.f-pa-intro {
  margin: var(--f-space-s) auto 0;
  max-width: var(--f-measure);
  font-size: var(--f-text);
  line-height: var(--f-lh-body);
  color: var(--f-pa-body);
}
.f-pa-compare {
  margin: var(--f-space-s) auto 0;
  max-width: none;
  font-weight: 700;
  color: var(--f-pa-ink);
}
.f-pa-item-title {
  margin: 0;
  font-size: var(--f-h5);
  line-height: var(--f-lh-h5);
  color: var(--f-pa-ink);
}
.f-pa-price {
  display: flex;
  align-items: baseline;
  gap: 0.18em;
  margin: 0;
  max-width: none;
  color: var(--f-pa-ink);
  white-space: nowrap;
}
.f-pa-amount {
  font-family: var(--brand-font-display, inherit);
  font-size: var(--f-h3);
  line-height: var(--f-lh-h3);
  letter-spacing: var(--f-track-h3);
  font-weight: 700;
  text-transform: var(--brand-display-transform, none);
}
.f-pa-unit {
  font-size: var(--f-text-micro);
  line-height: var(--f-lh-small);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--f-pa-unit, var(--f-pa-quiet));
}
.f-pa-body {
  margin: 0;
  max-width: 42ch;
  font-size: var(--f-text-small);
  line-height: var(--f-lh-small);
  color: var(--f-pa-body);
}
.f-pa-source {
  margin: 0;
  max-width: 48ch;
  font-size: var(--f-text-micro);
  line-height: var(--f-lh-small);
  color: var(--f-pa-quiet);
}
.f-pa-source strong { color: var(--f-pa-body); }
.f-pa-note {
  margin: var(--f-space-m) auto 0;
  max-width: var(--f-measure);
  text-align: center;
  font-size: var(--f-text-caption);
  line-height: var(--f-lh-small);
  color: var(--f-pa-quiet);
}
.f-pa-cover {
  position: relative;
  width: min(760px, 100%);
  margin: var(--f-space-l) auto 0;
  padding-top: var(--f-space-m);
  border-top: 2px solid var(--f-pa-ink);
  text-align: center;
}
.f-pa-cover-title {
  margin: 0;
  font-size: var(--f-h4);
  line-height: var(--f-lh-h4);
  color: var(--f-pa-ink);
}
.f-pa-cover-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--f-space-s) var(--f-space-m);
  margin: var(--f-space-s) 0 0;
  padding: 0;
  list-style: none;
}
.f-pa-cover-item {
  display: inline-flex;
  align-items: center;
  gap: var(--f-space-xs);
  color: var(--f-pa-body);
  font-size: var(--f-text-small);
  line-height: var(--f-lh-small);
}
.f-pa-cover-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  color: var(--f-pa-mark);
}
.f-pa-cover-icon svg { display: block; width: 100%; height: 100%; }
.f-pa-cover-close {
  margin: var(--f-space-s) auto 0;
  max-width: none;
  font-size: var(--f-text-caption);
  line-height: var(--f-lh-small);
  color: var(--f-pa-quiet);
}
.f-pa-columns {
  --f-pa-cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--f-pa-cols), minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  border-block: 1px solid var(--f-pa-rule);
}
.f-pa-columns[data-count="2"] { --f-pa-cols: 2; }
.f-pa-columns[data-count="4"] { --f-pa-cols: 4; }
.f-pa-column {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: start;
  gap: var(--f-space-s);
  min-width: 0;
  padding: var(--f-space-m);
}
.f-pa-column + .f-pa-column { border-left: 1px solid var(--f-pa-rule); }
.f-pa-column-top {
  display: grid;
  justify-items: center;
  gap: var(--f-space-xs);
  text-align: center;
}
.f-pa-column .f-pa-body { max-width: none; }
.f-pa-column .f-pa-source { align-self: end; }
.f-pa-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: var(--f-space-xs);
  color: var(--f-pa-ink);
}
.f-pa-icon svg { display: block; width: 100%; height: 100%; }
.f-pa-v-deck {
  background: var(--brand-bg-muted, color-mix(in srgb, var(--brand-bg, #fcfcfc) 94%, black));
  --f-pa-unit: var(--brand-accent, #0074c8);
}
.f-pa-v-deck .f-pa-head {
  margin-bottom: var(--f-space-m);
}
.f-pa-v-deck .f-pa-title {
  padding-bottom: var(--f-space-xs);
}
.f-pa-v-deck .f-pa-columns {
  overflow: hidden;
  background: var(--brand-bg, #fcfcfc);
  border: 1px solid var(--f-pa-rule);
  border-radius: 14px;
  box-shadow: 0 14px 34px -22px rgba(0, 0, 0, 0.32);
}
.f-pa-v-deck .f-pa-column { padding: var(--f-space-m); }
.f-pa-v-deck .f-pa-column-top {
  justify-items: start;
  text-align: left;
}
.f-pa-v-deck .f-pa-icon {
  width: 28px;
  height: 28px;
  margin-bottom: var(--f-space-xs);
  color: var(--brand-accent, #0074c8);
}
.f-pa-v-deck .f-pa-icon svg * { fill: currentColor; }
@media (max-width: 820px) {
  .f-pa-columns { grid-template-columns: 1fr; }
  .f-pa-column { grid-template-columns: minmax(0, 1fr); padding-inline: 0; }
  .f-pa-column + .f-pa-column { border-left: 0; border-top: 1px solid var(--f-pa-rule); }
  .f-pa-column-top { justify-items: start; text-align: left; }
}
@media (max-width: 560px) {
  .f-pa { padding-block: var(--f-space-l); }
  .f-pa-join-next { padding-bottom: var(--f-space-m); }
  .f-pa-head { margin-bottom: var(--f-space-m); }
  .f-pa-cover { margin-top: var(--f-space-m); }
  .f-pa-cover-list { display: grid; justify-content: center; gap: var(--f-space-xs); text-align: left; }
}
@media print {
  .f-pa { background: #fff !important; color: #000 !important; }
}
