/* Marketing system overview and a faithful, fictional recreation of the portal sheet. */
.system-hero-message { max-width:430px; }
.hero-channel-list { list-style:none; padding:0; margin:0; }
.hero-channel-list li { display:grid; grid-template-columns:20px 100px 1fr; gap:10px; align-items:center; padding:11px 0; border-top:1px solid var(--line); font-size:11px; }
.hero-channel-list .icon { width:17px; height:17px; color:var(--brand-ink); }
.hero-channel-list strong { font-size:12px; }.hero-channel-list span { color:var(--muted); }
.system-connection-strip .container { justify-content:space-between; gap:20px; flex-wrap:wrap; }
.system-connection-strip .connection-intro { font-size:12px; color:var(--muted); font-weight:400; }
.system-connection-strip strong { margin:0; }
.system-heading { display:grid; grid-template-columns:1.25fr 1fr; align-items:end; gap:60px; margin-bottom:45px; }
.system-heading h2 { font-size:clamp(44px,5vw,76px); margin:0; }
.system-heading .section-intro { margin:0; max-width:530px; }
.system-channels { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid #cdd0d6; border-bottom:1px solid #cdd0d6; }
.system-channels article { padding:30px 27px 28px 0; display:flex; flex-direction:column; align-items:flex-start; }
.system-channels article+article { border-left:1px solid #cdd0d6; padding-left:27px; }
.system-channels .icon { width:27px; height:27px; color:var(--brand-ink); margin-bottom:20px; }
.system-channels h3 { font-size:22px; letter-spacing:-.03em; margin-bottom:15px; }
.system-channels p { font-size:14px; line-height:1.85; color:#5f6471; margin-bottom:22px; }
.system-channels p strong { font-weight:600; color:#44535e; }
.system-channels article>span { margin-top:auto; font-size:11px; color:var(--brand-ink); font-weight:600; }
.system-routing { display:flex; gap:18px; align-items:center; padding:25px 0; }
.system-routing>.icon { flex:none; width:25px; height:25px; color:var(--brand-ink); }.system-routing p { max-width:810px; margin:0; font-size:13px; line-height:1.9; color:#616775; }.system-routing p strong { color:var(--ink); }.system-routing .text-link { margin-left:auto; flex:none; font-size:13px; }
.system-preview-intro { display:flex; align-items:end; justify-content:space-between; gap:30px; margin:48px 0 22px; }.system-preview-intro h3 { font-size:26px; margin:0; letter-spacing:-.04em; }.system-preview-intro .eyebrow { margin-bottom:10px; }.system-preview-intro>p { font-size:13px; color:#616775; margin:0; max-width:380px; }
.portal-sheet-demo { background:#0c0e18; color:#f8fafc; border:1px solid #30394f; border-radius:10px; padding:25px; overflow:hidden; box-shadow:0 16px 40px #07364d14; }
.portal-sheet-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; border-bottom:1px solid #343c56; padding-bottom:18px; margin-bottom:20px; flex-wrap:wrap; }
.portal-sheet-heading h3 { display:flex; align-items:center; gap:11px; font-family:var(--bs-body-font-family); font-size:23px; letter-spacing:-.04em; font-weight:700; color:#fff; margin:0 0 6px; }
.portal-sheet-heading h3 .icon { width:28px; height:32px; color:#00a576; flex:none; }.portal-sheet-heading p { font-size:11px; color:#a0aac0; margin:0; }.portal-sheet-heading p span { margin:0 4px; }
.portal-sheet-tools { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.portal-sheet-tools button,.portal-sheet-tools a { display:inline-flex; align-items:center; gap:7px; padding:10px 13px; border:1px solid #343d59; border-radius:6px; background:#202737; color:#f5f6fc; font-size:11px; font-weight:600; text-decoration:none; white-space:nowrap; line-height:1.4; }
.portal-sheet-tools .icon { width:14px; height:14px; }.portal-sheet-tools .portal-download { color:var(--brand-ink); background:var(--brand-blue); border-color:var(--brand-blue); box-shadow:0 3px 12px #6bcef733; }.portal-sheet-tools button:disabled { background:transparent; color:#9da2b0; border-color:#565b69; opacity:.7; cursor:default; }
.portal-sheet-tools button:not(:disabled):hover { background:#2d354a; }.portal-sheet-tools .portal-download:hover { background:var(--brand-hover); }
.portal-sheet-banner { display:flex; align-items:center; gap:10px; padding:15px 17px; background:#191d2c; border:1px solid #343c56; border-radius:7px; margin-bottom:20px; font-size:12px; line-height:1.7; }.portal-sheet-banner>.icon { width:16px; height:16px; flex:none; }.portal-demo-tag { margin-left:auto; color:#bec8dc; font-size:10px; border:1px solid #444d68; border-radius:4px; padding:4px 8px; white-space:nowrap; }
.portal-sheet-scroll { overflow:auto; max-height:410px; border:1px solid #343c56; border-radius:8px 8px 0 0; scrollbar-color:#394563 #101321; scrollbar-width:thin; }
.portal-sheet-table { width:100%; min-width:2090px; border-collapse:separate; border-spacing:0; font-size:12px; }
.portal-sheet-table th { position:sticky; top:0; z-index:1; background:#1f2336; color:#fff; border-bottom:2px solid #343c56; border-right:1px solid #343c56; padding:10px 13px; text-align:left; white-space:nowrap; font-weight:700; }
.portal-column-header { display:flex; flex-direction:column; gap:8px; min-width:112px; }.portal-sheet-table th:nth-child(2) .portal-column-header { min-width:155px; }.portal-sheet-table th:nth-child(5) .portal-column-header { min-width:185px; }.portal-sheet-table th:nth-child(7) .portal-column-header { min-width:185px; }
.portal-column-header input,.portal-column-header select { width:100%; height:28px; padding:4px 8px; background:#111627; color:#e2e8f0; border:1px solid #3b4662; border-radius:5px; font-size:11px; font-weight:400; line-height:normal; }.portal-column-header input::placeholder { color:#94a3bd; }
.portal-sheet-table td { background:#191d2c; color:#e2e8f0; border-right:1px solid #343c56; border-bottom:1px solid #343c56; padding:12px 13px; white-space:nowrap; height:46px; }.portal-sheet-table td:first-child { text-align:center; color:#a7afc2; }.portal-sheet-table .portal-row-unread td { background:#15384c; border-bottom-color:#37677f; }.portal-sheet-table tbody tr:hover td { background:#252c40; }.portal-sheet-table tbody tr.portal-row-unread:hover td { background:#1b4860; }
.portal-demo-note,.portal-sheet-table [data-demo-outcome] { width:100%; min-width:90px; background:#111627; color:#e2e8f0; border:1px solid #596079; border-radius:4px; padding:5px 7px; font-size:11px; }.portal-demo-note { min-width:180px; }
.portal-read-status { color:#b7f0d5; font-size:11px; padding:5px 9px; border-radius:4px; background:#164939; }.portal-mark-read { color:var(--brand-ink); background:var(--brand-blue); border:1px solid var(--brand-blue); border-radius:4px; font-size:11px; padding:5px 10px; }
.portal-sheet-demo :is(button,a,input,select):focus-visible,.portal-sheet-scroll:focus-visible { outline:2px solid var(--brand-blue); outline-offset:3px; }
.portal-sheet-footer { display:flex; justify-content:space-between; gap:20px; padding:12px 15px; font-size:10px; line-height:1.5; background:#1c2335; color:#b0bbd0; border:1px solid #343c56; border-top:0; border-radius:0 0 7px 7px; }
.system-section .demo-disclaimer { max-width:920px; margin:15px auto 0; line-height:1.8; }
@media(max-width:1199px) { .system-heading { gap:30px; }.system-channels article { padding-right:20px; }.system-channels article+article { padding-left:20px; }.system-routing { flex-wrap:wrap; }.system-routing p { flex:1; }.system-routing .text-link { margin-left:43px; }.portal-sheet-heading h3 { font-size:21px; } }
@media(max-width:767px) { .system-heading { grid-template-columns:1fr; gap:20px; }.system-heading h2 { font-size:48px; }.system-channels { grid-template-columns:1fr 1fr; }.system-channels article { padding:24px 18px 24px 0; }.system-channels article+article { padding-left:18px; }.system-channels article:nth-child(3) { border-left:0; padding-left:0; }.system-channels article:nth-child(n+3) { border-top:1px solid #cdd0d6; }.system-channels p { font-size:13px; }.system-channels h3 { font-size:20px; }.system-preview-intro { align-items:start; flex-direction:column; gap:14px; }.system-preview-intro h3 { font-size:23px; }.portal-sheet-demo { padding:16px; }.portal-sheet-heading h3 { font-size:19px; line-height:1.4; align-items:start; }.portal-sheet-heading h3 .icon { width:23px; height:27px; }.portal-sheet-banner { flex-wrap:wrap; padding:12px; font-size:11px; }.portal-sheet-banner>span:not(.portal-demo-tag) { flex:1; min-width:180px; }.portal-demo-tag { margin-left:26px; }.portal-sheet-footer { flex-wrap:wrap; gap:5px; }.system-connection-strip .container { justify-content:flex-start; gap:15px 23px; }.system-connection-strip .connection-intro { flex:1; }.system-connection-strip .container>span:not(.connection-intro) { flex-basis:calc(50% - 23px); }.hero-channel-list li { grid-template-columns:18px 92px 1fr; gap:8px; }.hero-channel-list span { font-size:10px; } }
@media(max-width:767px) { .system-routing p { flex:1 1 calc(100% - 43px); }.system-routing .text-link { margin-left:43px; } }
@media(max-width:399px) { .system-heading h2 { font-size:42px; }.system-channels article,.system-channels article+article { padding-right:10px; }.system-channels article+article { padding-left:12px; }.system-channels article:nth-child(3) { padding-left:0; }.system-channels p { font-size:12px; }.system-channels article>span { font-size:10px; }.system-hero-message { padding:16px; }.hero-channel-list li { grid-template-columns:15px 83px 1fr; gap:6px; }.hero-channel-list strong { font-size:11px; } }