/* Four-portal card block (home and product). Site tokens only; dark mode follows the token swap plus the rules below. */
.portal-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .portal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .portal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.portal-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.portal-num { margin: 0; font: 600 12px/1.4 var(--sans); letter-spacing: .08em; color: var(--subtle); }
.portal-num span:first-child { color: var(--green); }
.portal-icon { width: 44px; height: 44px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--green-soft); color: var(--green); }
.portal-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.portal-name { margin: 4px 0 0; font-size: 20px; line-height: 1.25; }
.portal-purpose { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.portal-points { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 8px; font-size: 14px; line-height: 1.45; }
.portal-points li { position: relative; padding-inline-start: 18px; }
.portal-points li::before { content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--green); }
.portal-watch { margin-top: auto; align-self: flex-start; font-weight: 600; font-size: 15px; color: var(--green); text-decoration: underline; text-underline-offset: 3px; padding-block: 8px; }
.portal-watch:hover { color: var(--green-hover); }
.portal-watch:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }
.portal-block { margin-bottom: 28px; }

:root[data-theme="dark"] .portal-card { background: var(--surface); border-color: var(--line-strong); }
:root[data-theme="dark"] .portal-icon { background: var(--green-soft); color: var(--green); }
@media all {
  :root:not([data-theme="light"]) .portal-card { background: var(--surface); border-color: var(--line-strong); }
  :root:not([data-theme="light"]) .portal-icon { background: var(--green-soft); color: var(--green); }
}