body.portal-page {
  --portal-max: 1240px;
  --portal-rail: 300px;
  --portal-heading: clamp(1.75rem, 3.5vw, 2.75rem);
  --portal-radius: 16px;
}
.portal-shell { width: min(calc(100% - var(--space-10)), var(--portal-max)); margin-inline: auto; }
.portal-page a:focus-visible, .portal-page button:focus-visible, .portal-page input:focus-visible, .portal-page select:focus-visible, .portal-page textarea:focus-visible, .portal-page summary:focus-visible { outline: 3px solid var(--accent-primary); outline-offset: 3px; }
.portal-page input, .portal-page textarea, .portal-page select { max-width: 100%; border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-primary); background: var(--surface-primary); padding: var(--space-3); min-height: var(--control-touch-height); }
.portal-page input::placeholder, .portal-page textarea::placeholder { color: var(--text-tertiary); opacity: 1; }
.portal-page button { cursor: pointer; min-height: var(--control-touch-height); }
.portal-page button:disabled { cursor: wait; opacity: .65; }
.portal-page .eyebrow { font-size: var(--type-caption-size); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-body); color: var(--accent-primary); margin-bottom: var(--space-2); }
.portal-page h1 { font-size: var(--portal-heading); line-height: var(--line-h1); letter-spacing: var(--tracking-heading); }
.portal-page h2 { font-size: var(--type-h2-size); line-height: var(--line-h2); letter-spacing: var(--tracking-heading); }
.portal-page h3 { font-size: var(--type-body-lg-size); }
.portal-page p { color: var(--text-secondary); }
.portal-page main { padding-bottom: var(--space-12); }
.portal-button { display: inline-flex; justify-content: center; align-items: center; gap: var(--space-2); min-height: var(--control-touch-height); padding: var(--space-2) var(--space-5); border: 0; border-radius: var(--radius-sm); background: var(--accent-primary); color: var(--text-on-accent); font-weight: var(--weight-semibold); }
.portal-page .button-secondary { background: var(--accent-soft); color: var(--accent-primary); }
.portal-button:hover { background: var(--accent-hover); }
.portal-text-link { display: inline-flex; align-items: center; min-height: var(--control-touch-height); gap: var(--space-2); font-weight: var(--weight-semibold); color: var(--accent-primary); font-size: var(--type-body-sm-size); }
.portal-text-link:hover { text-decoration: underline; text-underline-offset: .2em; }
.portal-section-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-5); }
.portal-section-head h2 { margin-bottom: 0; }
.portal-section-head > p { font-size: var(--type-body-sm-size); margin: 0; }
.portal-data-note { font-size: var(--type-caption-size); color: var(--text-secondary); line-height: var(--line-body); }
.portal-empty { padding: var(--space-8) var(--space-4); background: var(--surface-secondary); border-radius: var(--radius-sm); }
.portal-dateline { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); color: var(--text-secondary); font-size: var(--type-caption-size); }
.portal-dateline p { margin: 0; }
.portal-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--portal-rail)); gap: var(--space-12); padding-block: var(--space-6) var(--space-10); }
.portal-intro h1 { margin-bottom: var(--space-4); }
.portal-lead { font-size: var(--type-body-lg-size); margin-bottom: var(--space-6); }
.portal-item-search { display: flex; gap: var(--space-2); padding: var(--space-2); background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); max-width: 640px; }
.portal-item-search input { flex: 1; width: 0; min-width: 0; border: 0; padding: var(--space-3); }
.portal-item-search button { border: 0; border-radius: var(--radius-sm); padding-inline: var(--space-5); background: var(--accent-primary); color: var(--text-on-accent); font-weight: var(--weight-semibold); }
.portal-item-search button:hover { background: var(--accent-hover); }
.portal-search-examples { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); padding-top: var(--space-2); font-size: var(--type-caption-size); color: var(--text-secondary); }
.portal-search-examples a { display: inline-flex; min-height: var(--control-touch-height); align-items: center; }
.portal-search-examples a:hover { color: var(--accent-primary); text-decoration: underline; }
.portal-start { padding: var(--space-6); background: var(--surface-strong); border-radius: var(--portal-radius); align-self: start; }
.portal-section-number { font-size: var(--type-caption-size); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-small-caps); color: var(--accent-primary); }
.portal-start h2 { margin-block: var(--space-3) var(--space-5); font-size: var(--type-h3-size); }
.portal-task-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-4); border-top: 1px solid var(--border-default); }
.portal-task-row strong, .portal-task-row small { display: block; }
.portal-task-row small { margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--type-caption-size); }
.portal-task-row:hover strong { text-decoration: underline; text-underline-offset: .2em; }
.portal-personalize { padding-block: var(--space-8); border-block: 1px solid var(--border-default); }
.portal-roles { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-3); }
.portal-roles button { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); text-align: left; background: var(--surface-primary); color: var(--text-primary); border: 0; border-radius: var(--radius-md); }
.portal-roles button[aria-pressed="true"] { background: var(--accent-soft); }
.portal-roles button:hover { background: var(--surface-strong); }
.portal-roles strong, .portal-roles small { display: block; }
.portal-roles small { margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--type-caption-size); }
.role-symbol { color: var(--accent-primary); font-size: var(--type-caption-size); font-variant-numeric: tabular-nums; }
.role-check { margin-left: auto; color: var(--accent-primary); visibility: hidden; }
[aria-pressed="true"] .role-check { visibility: visible; }
.portal-role-result { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-4); }
.portal-role-result > p { margin: 0; max-width: 54ch; font-size: var(--type-body-sm-size); }
.portal-inline-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.portal-inline-links a { display: inline-flex; align-items: center; min-height: var(--control-touch-height); color: var(--accent-primary); font-size: var(--type-body-sm-size); font-weight: var(--weight-semibold); }
.portal-inline-links a:hover { text-decoration: underline; }
.portal-columns { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,var(--portal-rail)); gap: var(--space-10); padding-block: var(--space-10); }
.portal-columns > *, .portal-intro > *, .portal-community-boards > * { min-width: 0; }
.portal-categories { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.portal-categories button { padding: var(--space-2) var(--space-4); border: 0; border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--surface-primary); font-size: var(--type-body-sm-size); }
.portal-categories button[aria-pressed="true"] { background: var(--accent-primary); color: var(--text-on-accent); }
.portal-price-head, .portal-price-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(100px,.7fr) 100px; align-items: center; gap: var(--space-3); }
.portal-price-head { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-default); font-size: var(--type-caption-size); color: var(--text-secondary); }
.portal-price-head span:nth-child(n+2) { text-align: right; }
.portal-price-row { padding: var(--space-4); border-bottom: 1px solid var(--border-default); min-height: 76px; }
.portal-price-row:hover { background: var(--accent-soft); }
.portal-price-row strong, .portal-price-row small { display: block; }
.portal-price-row small { margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--type-caption-size); }
.portal-price-value { text-align: right; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.portal-price-date { text-align: right; color: var(--text-secondary); font-size: var(--type-caption-size); }
.portal-price-list + .portal-data-note, .portal-price-list ~ .portal-data-note { margin-top: var(--space-4); }
.portal-bottom-link { display: flex; justify-content: space-between; align-items: center; min-height: var(--control-touch-height); gap: var(--space-4); font-size: var(--type-body-sm-size); font-weight: var(--weight-semibold); color: var(--accent-primary); }
.portal-bottom-link:hover { text-decoration: underline; }
.portal-reference { padding: var(--space-6); border-radius: var(--portal-radius); background: var(--surface-primary); align-self: start; }
.portal-reference > p { font-size: var(--type-body-sm-size); }
.portal-reference-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-4); border-top: 1px solid var(--border-default); }
.portal-reference-row strong, .portal-reference-row small { display: block; }
.portal-reference-row strong { font-size: var(--type-body-sm-size); }
.portal-reference-row small { margin-top: var(--space-1); font-size: var(--type-caption-size); color: var(--text-secondary); }
.portal-reference-row:hover strong { text-decoration: underline; }
.portal-community { padding-block: var(--space-8); border-top: 1px solid var(--border-default); }
.portal-community-boards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-4); }
.portal-community-boards > a { padding: var(--space-6); background: var(--surface-primary); border-radius: var(--portal-radius); }
.portal-community-boards > a:hover { background: var(--accent-soft); }
.portal-board-label { font-size: var(--type-caption-size); color: var(--accent-primary); font-weight: var(--weight-semibold); }
.portal-community-boards h3 { margin-block: var(--space-5) var(--space-3); }
.portal-community-boards p { font-size: var(--type-body-sm-size); }
.portal-trust { margin-top: var(--space-8); padding: var(--space-8); border-radius: var(--portal-radius); background: var(--surface-secondary); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: var(--space-3) var(--space-10); }
.portal-trust h2 { font-size: var(--type-h3-size); margin: 0; }
.portal-trust p { margin: 0; font-size: var(--type-body-sm-size); }
.portal-trust a { min-height: var(--control-touch-height); display: inline-flex; align-items: center; color: var(--accent-primary); font-weight: var(--weight-semibold); font-size: var(--type-body-sm-size); }
@media (max-width: 960px) {
  .portal-intro { gap: var(--space-6); }
  .portal-roles { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .portal-role-result { flex-direction: column; align-items: flex-start; }
  .portal-columns { grid-template-columns: minmax(0,1fr); }
  .portal-reference h2 br { display: none; }
  .portal-community-boards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .portal-shell { width: calc(100% - var(--space-8)); }
  .portal-dateline { font-size: var(--type-caption-size); flex-wrap: wrap; gap: var(--space-1); }
  .portal-intro { grid-template-columns: minmax(0,1fr); gap: var(--space-4); padding-block: var(--space-4) var(--space-6); }
  .portal-lead { font-size: var(--type-body-size); }
  .wide-only { display: none; }
  .portal-start { padding: var(--space-5); }
  .portal-start h2 { margin-bottom: var(--space-3); }
  .portal-task-row { padding-block: var(--space-3); }
  .portal-item-search button { padding-inline: var(--space-3); }
  .portal-item-search input { font-size: var(--type-body-sm-size); padding-inline: var(--space-2); }
  .portal-section-head { gap: var(--space-2); }
  .portal-roles { gap: var(--space-2); }
  .portal-roles button { padding: var(--space-3); gap: var(--space-2); font-size: var(--type-body-sm-size); }
  .role-symbol { display: none; }
  .portal-price-head, .portal-price-row { grid-template-columns: minmax(0,1fr) minmax(80px,.65fr) 70px; gap: var(--space-2); padding-inline: var(--space-2); }
  .portal-price-row strong, .portal-price-value { font-size: var(--type-body-sm-size); }
  .portal-community-boards { grid-template-columns: minmax(0,1fr); }
  .portal-community-boards h3 br { display: none; }
  .portal-community-boards h3 { margin-top: var(--space-3); }
  .portal-trust { grid-template-columns: minmax(0,1fr); padding: var(--space-5); }
}
