* { box-sizing: border-box; }
    body.customer-portal {
      min-height: 100dvh;
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 34rem),
        var(--canvas);
    }
    .hidden { display: none !important; }
    .portal-login-shell {
      min-height: 100dvh;
      display: grid;
      place-items: center;
      padding: var(--s5);
    }
    .portal-login-card {
      width: min(100%, 440px);
      padding: var(--s6);
      border-radius: var(--r-lg);
      box-shadow: var(--e2);
      display: flex;
      flex-direction: column;
      gap: var(--s4);
    }
    .portal-brand { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
    .portal-brand img {
      width: var(--brand-wordmark-w);
      height: auto;
      aspect-ratio: var(--brand-wordmark-ratio);
      object-fit: contain;
      display: block;
    }
    .portal-brand .eyebrow { margin: 0; white-space: nowrap; }
    .portal-app { min-height: 100dvh; display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); }
    .portal-side {
      position: sticky;
      top: 0;
      height: 100dvh;
      padding: var(--s5) var(--s4);
      border-right: 1px solid var(--line);
      background: color-mix(in srgb, var(--surface-1) 94%, transparent);
      backdrop-filter: blur(16px);
      display: flex;
      flex-direction: column;
      gap: var(--s5);
      z-index: 5;
    }
    .portal-welcome h1 { margin: 0; font-size: var(--fs-h3); }
    .portal-welcome p { margin: var(--s1) 0 0; color: var(--muted); font-size: var(--fs-caption); }
    .portal-tabs { display: flex; flex-direction: column; gap: var(--s2); }
    .portal-tab {
      appearance: none;
      width: 100%;
      min-height: 3rem;
      padding: var(--s2) var(--s3);
      border: 1px solid transparent;
      border-radius: var(--r-md);
      color: var(--ink-2);
      background: transparent;
      font: 600 var(--fs-compact)/var(--lh-label) var(--font);
      text-align: left;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: var(--s2);
      transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
    }
    .portal-tab:hover { color: var(--ink); background: var(--surface-2); }
    .portal-tab.is-active {
      color: var(--ink);
      border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
      background: color-mix(in srgb, var(--accent) 9%, var(--surface-1));
      box-shadow: var(--e1);
    }
    .portal-tab .icon { color: var(--accent); }
    .portal-main { min-width: 0; padding: var(--s5) clamp(var(--s4), 4vw, var(--s8)) var(--s8); }
    .portal-topbar {
      min-height: var(--s8);
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
      gap: var(--s2);
      position: sticky;
      top: 0;
      z-index: 7;
      margin: calc(var(--s5) * -1) calc(clamp(var(--s4), 4vw, var(--s8)) * -1) var(--s4);
      padding: var(--s2) clamp(var(--s4), 4vw, var(--s8));
      border-bottom: 1px solid var(--line);
      background: color-mix(in srgb, var(--surface-1) 94%, transparent);
      backdrop-filter: blur(var(--s4));
    }
    .account-button {
      appearance: none;
      min-height: var(--s7);
      padding: var(--s1) var(--s2);
      border: 1px solid var(--line-strong);
      border-radius: var(--r-pill);
      background: var(--surface-2);
      box-shadow: var(--e1);
      color: var(--ink);
      font: 600 var(--fs-compact)/var(--lh-label) var(--font);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: var(--s2);
      transition: background var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease);
    }
    .account-button:hover { border-color: var(--accent); background: var(--surface-3); }
    .account-button:focus-visible {
      outline: none;
      border-color: var(--accent);
      box-shadow: var(--focus-ring), var(--e1);
    }
    .account-avatar {
      width: var(--s6);
      height: var(--s6);
      border-radius: var(--r-pill);
      background: var(--accent-tint);
      color: var(--cc-focus-fg);
      display: inline-grid;
      place-items: center;
      font-size: var(--fs-caption);
      font-weight: 700;
    }
    .account-button-name { max-width: calc(var(--s8) * 2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .account-button-chevron {
      width: var(--s2);
      height: var(--s2);
      margin: 0 var(--s1) var(--s1) 0;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg);
      transition: transform var(--t-micro) var(--ease);
    }
    .account-button[aria-expanded="true"] .account-button-chevron { margin-block: var(--s1) 0; transform: rotate(225deg); }
    .account-menu {
      position: absolute;
      right: clamp(var(--s4), 4vw, var(--s8));
      top: calc(100% + var(--s1));
      width: min(calc(var(--s8) * 5), calc(100vw - var(--s6)));
      padding: var(--s2);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      background: var(--surface-1);
      box-shadow: var(--e2);
    }
    .account-menu-head { padding: var(--s2) var(--s3) var(--s3); display: flex; flex-direction: column; gap: var(--s1); }
    .account-menu-name { color: var(--ink); font-size: var(--fs-body); overflow-wrap: anywhere; }
    .account-menu-email { color: var(--muted); font-size: var(--fs-caption); overflow-wrap: anywhere; }
    .account-menu-sep { height: 1px; margin: var(--s2); background: var(--line); }
    .account-menu button {
      width: 100%;
      min-height: var(--s7);
      padding: var(--s2) var(--s3);
      border: 0;
      border-radius: var(--r-sm);
      background: transparent;
      color: var(--ink);
      text-align: left;
      font: inherit;
      cursor: pointer;
    }
    .account-menu button:hover { background: var(--surface-2); }
    .account-menu button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
    .preview-banner {
      position: sticky;
      top: 0;
      z-index: 8;
      flex: 1 0 calc(100% + (clamp(var(--s4), 4vw, var(--s8)) * 2));
      margin: calc(var(--s2) * -1) calc(clamp(var(--s4), 4vw, var(--s8)) * -1) 0;
      padding: var(--s2) clamp(var(--s4), 4vw, var(--s8));
      background: var(--warn-tint);
      border-bottom: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line));
      color: var(--ink);
      font-size: var(--fs-compact);
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: center;
      gap: var(--s3);
    }
    .preview-banner a { color: var(--ink); font-weight: 700; white-space: nowrap; }
    .preview-banner .plist-actions { margin: 0; align-items: center; justify-content: flex-end; }
    .preview-personas { display: inline-flex; flex-wrap: wrap; gap: var(--s1); }
    .preview-persona,
    .preview-exit {
      appearance: none;
      min-height: var(--s6);
      padding: var(--s1) var(--s3);
      border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line));
      border-radius: var(--r-pill);
      background: var(--surface-1);
      color: var(--ink-2);
      font: 600 var(--fs-caption)/var(--lh-label) var(--font);
      cursor: pointer;
      transition: background var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
    }
    .preview-persona:hover,
    .preview-exit:hover { border-color: var(--warn); color: var(--ink); }
    .preview-persona.is-active { border-color: var(--warn); background: var(--warn-tint); color: var(--ink); }
    .preview-persona:focus-visible,
    .preview-exit:focus-visible { outline: none; box-shadow: var(--focus-ring); }
    .preview-persona[disabled],
    .preview-exit[disabled] { opacity: .4; cursor: wait; }
    .portal-content { width: min(100%, 76rem); margin: 0 auto; display: flex; flex-direction: column; gap: var(--s4); }
    .portal-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
    .portal-page-head h2 { margin: 0; font-size: clamp(var(--fs-h2), 3vw, 2.35rem); letter-spacing: var(--track-tight); }
    .portal-page-head p { max-width: 42rem; margin: var(--s1) 0 0; color: var(--ink-2); }
    .answer-card {
      padding: clamp(var(--s4), 4vw, var(--s6));
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      background: linear-gradient(135deg, var(--surface-1), color-mix(in srgb, var(--accent) 6%, var(--surface-1)));
      box-shadow: var(--e1);
      display: flex;
      align-items: flex-start;
      gap: var(--s4);
    }
    /* The card's own wash follows the answer it is giving. A brand-accent tint
       under "needs attention" reads as decoration on a warning, which is the
       one place a security product must not look decorative. */
    .answer-card.is-ok {
      border-color: color-mix(in srgb, var(--ok) 25%, var(--line));
      background: linear-gradient(135deg, var(--surface-1), color-mix(in srgb, var(--ok) 7%, var(--surface-1)));
    }
    .answer-card.is-warn {
      border-color: color-mix(in srgb, var(--warn) 38%, var(--line));
      background: linear-gradient(135deg, var(--surface-1), color-mix(in srgb, var(--warn) 9%, var(--surface-1)));
    }
    .answer-icon { flex: 0 0 auto; color: var(--accent); }
    .answer-card.is-ok .answer-icon { color: var(--ok); }
    .answer-card.is-warn .answer-icon { color: var(--warn); }
    .answer-icon .icon { --icon-sz: var(--s7); }
    .answer-title { margin: 0; font-size: var(--fs-h2); letter-spacing: var(--track-tight); }
    .answer-sub { margin: var(--s1) 0 0; color: var(--ink-2); }
    .metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
    .metric-card {
      min-width: 0;
      padding: var(--s4);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      background: var(--surface-1);
    }
    .metric-value { display: block; font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--track-tight); }
    .metric-label { display: block; margin-top: var(--s1); color: var(--ink-2); font-size: var(--fs-caption); }
    .section-card {
      min-width: 0;
      padding: clamp(var(--s3), 3vw, var(--s5));
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      background: var(--surface-1);
      box-shadow: var(--e1);
    }
    .section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
    .section-head h3 { margin: 0; font-size: var(--fs-h3); }
    .section-head p { margin: var(--s1) 0 0; color: var(--muted); font-size: var(--fs-compact); max-width: 46rem; }
    .two-col { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr); gap: var(--s4); align-items: start; }
    .kv { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
    .kv:last-child { border-bottom: 0; }
    .kv-key { color: var(--ink-2); }
    .plist { list-style: none; margin: 0; padding: 0; }
    .plist-item { padding: var(--s3) 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s1); }
    .plist-item:last-child { border-bottom: 0; }
    .plist-item.is-clickable { cursor: pointer; }
    .plist-item.is-clickable:hover { background: var(--surface-2); }
    .plist-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
    .plist-name { color: var(--ink); font-weight: 650; overflow-wrap: anywhere; }
    .plist-sub { color: var(--muted); font-size: var(--fs-caption); }
    .plist-actions { display: flex; gap: var(--s2); margin-top: var(--s1); flex-wrap: wrap; }
    .tab-body { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
    .tab-lead { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--s2); }
    .lead-note, .activity-note { color: var(--muted); font-size: var(--fs-caption); }
    .back-link { appearance: none; border: 0; background: none; color: var(--ink-2); padding: 0; display: inline-flex; align-items: center; gap: var(--s1); cursor: pointer; font: 600 var(--fs-compact)/var(--lh-label) var(--font); }
    .graph-shell { position: relative; min-height: 22rem; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
    .graph-shell svg { display: block; width: 100%; height: 22rem; touch-action: none; }
    .graph-link { stroke: var(--line-strong); stroke-opacity: .65; }
    .graph-node { stroke: var(--surface-1); stroke-width: 3; cursor: pointer; }
    .graph-label { fill: var(--ink-2); font: 600 12px/1 var(--font); pointer-events: none; text-anchor: middle; }
    .graph-tip { position: absolute; z-index: 2; max-width: 15rem; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-1); box-shadow: var(--e2); color: var(--ink); font-size: var(--fs-caption); pointer-events: none; }
    .graph-fallback { padding: var(--s3); }
    .graph-fallback .plist-item { padding-inline: var(--s2); }
    .graph-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); color: var(--muted); font-size: var(--fs-caption); }
    .legend-key { display: inline-flex; align-items: center; gap: var(--s1); }
    .legend-dot { width: .65rem; height: .65rem; border-radius: 50%; background: var(--muted); }
    #emailGraph + .graph-legend .legend-key:nth-child(1) .legend-dot,
    #protectionGraph + .graph-legend .legend-key:nth-child(1) .legend-dot { background: var(--ok); }
    #emailGraph + .graph-legend .legend-key:nth-child(2) .legend-dot { background: var(--info); }
    #emailGraph + .graph-legend .legend-key:nth-child(3) .legend-dot,
    #protectionGraph + .graph-legend .legend-key:nth-child(2) .legend-dot { background: var(--warn); }
    .timeline { position: relative; padding-left: var(--s5); }
    .timeline:before { content: ""; position: absolute; left: .45rem; top: .55rem; bottom: .55rem; width: 2px; background: var(--line); }
    .timeline-item { position: relative; padding: 0 0 var(--s4); }
    .timeline-item:before { content: ""; position: absolute; left: calc(var(--s5) * -1 + .15rem); top: .45rem; width: .65rem; height: .65rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--surface-1); }
    .timeline-item h4 { margin: 0; font-size: var(--fs-body); }
    .timeline-item p { margin: var(--s1) 0 0; color: var(--ink-2); font-size: var(--fs-compact); }
    .timeline-item time { color: var(--muted); font-size: var(--fs-caption); }
    .thread-msg { padding: var(--s3) 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
    .thread-who { display: block; margin-bottom: var(--s1); color: var(--muted); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--track-eyebrow); }
    .federated-signin { display: flex; flex-direction: column; gap: var(--s2); }
    .federated-or { color: var(--muted); font-size: var(--fs-caption); text-align: center; }
    .federated-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); width: 100%; text-decoration: none; }
    .dl-hero {
      padding: var(--s5);
      border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
      border-radius: var(--r-lg);
      background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--surface-1)), var(--surface-1));
      box-shadow: var(--e2);
      display: flex;
      flex-direction: column;
      gap: var(--s3);
    }
    .dl-hero-badge,
    .dl-os-chip {
      width: max-content;
      padding: var(--s1) var(--s2);
      border-radius: var(--r-pill);
      font-size: var(--fs-caption);
      font-weight: 700;
    }
    .dl-hero-badge {
      border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
      background: var(--accent-tint);
      color: var(--cc-focus-fg);
    }
    .dl-os-chip {
      background: var(--surface-2);
      color: var(--ink-2);
      font-weight: 600;
    }
    /* Lets a `.dl-hero-badge` or `.dl-os-chip` sit beside the text it qualifies
       rather than stacking under it — the hero and the installer rows are both
       column flex, so a bare chip would take a line of its own. Layout only: it
       adds no second badge style. */
    .dl-badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-width: 0; }
    .dl-hero-name { color: var(--ink); font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--track-tight); }
    .dl-hero-meta,
    .dl-row-meta,
    .dl-group-hint,
    .dl-note { color: var(--muted); font-size: var(--fs-caption); }
    .dl-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
    .dl-group {
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      background: var(--surface-1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .dl-group-head {
      padding: var(--s3);
      border-bottom: 1px solid var(--line);
      background: var(--surface-2);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--s3);
      flex-wrap: wrap;
    }
    .dl-group-title { margin: 0; color: var(--ink); font-size: var(--fs-h3); font-weight: 700; }
    .dl-group-hint { max-width: 46rem; margin: var(--s1) 0 0; color: var(--muted); font-size: var(--fs-compact); }
    .dl-list { list-style: none; margin: 0; padding: 0; background: var(--surface-1); }
    .dl-row {
      min-width: 0;
      padding: var(--s3);
      border: 0;
      border-bottom: 1px solid var(--line);
      border-inline-start: var(--s1) solid transparent;
      background: var(--surface-1);
      display: flex;
      align-items: center;
      gap: var(--s3);
      transition: background var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
    }
    .dl-row:last-child { border-bottom: 0; }
    .dl-row:hover { background: var(--surface-2); }
    .dl-row.is-match { border-inline-start-color: var(--accent); background: var(--surface-2); }
    .dl-row.is-match:hover { background: var(--surface-2); }
    .dl-row-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--s1); }
    .dl-row-name { color: var(--ink); font-weight: 650; overflow-wrap: anywhere; }
    .dl-row-action { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--s2); }
    .dl-more { border-top: 1px solid var(--line); padding-top: var(--s3); }
    .dl-more-summary {
      width: max-content;
      list-style: none;
      padding: var(--s2) var(--s3);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      background: var(--surface-2);
      color: var(--ink);
      font-weight: 650;
      cursor: pointer;
    }
    .dl-more-summary::-webkit-details-marker { display: none; }
    .dl-more-summary::after { content: " +"; color: var(--accent); }
    .dl-more[open] .dl-more-summary::after { content: " −"; }
    .dl-more-summary:hover { border-color: var(--line-strong); background: var(--surface-3); }
    .dl-more-summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
    .dl-note { margin: var(--s2) 0 0; color: var(--muted); font-size: var(--fs-caption); }
    .dl-group > .dl-note { margin: 0; padding: var(--s3); }
    .state-panel {
      min-height: calc(var(--s8) * 3);
      padding: var(--s6);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      background: var(--surface-1);
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--s2);
    }
    .state-panel.is-warn { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); background: var(--warn-tint); }
    .state-panel.is-bad { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); background: var(--bad-tint); }
    .state-panel-icon { color: var(--accent); }
    .state-panel.is-warn .state-panel-icon { color: var(--warn); }
    .state-panel.is-bad .state-panel-icon { color: var(--bad); }
    .state-panel-icon .icon { --icon-sz: var(--s7); }
    .state-panel-title { margin: 0; color: var(--ink); font-size: var(--fs-h3); font-weight: 700; }
    .state-panel-hint { max-width: calc(var(--s8) * 9); margin: 0; color: var(--muted); }
    .state-panel-actions { margin-top: var(--s2); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2); }
    .select {
      appearance: none;
      width: 100%;
      min-height: var(--s7);
      padding: var(--s3) var(--s7) var(--s3) var(--s3);
      border: 1px solid var(--line);
      border-radius: var(--r-sm);
      background-color: var(--surface-1);
      background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
      background-position: calc(100% - var(--s4)) 50%, calc(100% - var(--s3)) 50%;
      background-size: var(--s2) var(--s2), var(--s2) var(--s2);
      background-repeat: no-repeat;
      color: var(--ink);
      font: inherit;
      transition: border-color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease);
    }
    .select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
    .select option { background: var(--surface-1); color: var(--ink); }
    .persona-switch {
      padding: var(--s4);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      background: var(--surface-2);
      display: flex;
      flex-direction: column;
      gap: var(--s3);
    }
    .persona-switch-options { display: flex; flex-wrap: wrap; gap: var(--s2); }
    .persona-option {
      appearance: none;
      min-height: var(--s7);
      padding: var(--s2) var(--s3);
      border: 1px solid var(--line-strong);
      border-radius: var(--r-md);
      background: var(--surface-1);
      color: var(--ink-2);
      font: 600 var(--fs-compact)/var(--lh-label) var(--font);
      cursor: pointer;
      transition: background var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
    }
    .persona-option:hover { border-color: var(--accent); color: var(--ink); }
    .persona-option.is-active { border-color: var(--accent); background: var(--accent-tint); color: var(--ink); }
    .persona-option:focus-visible { outline: none; box-shadow: var(--focus-ring); }
    .persona-option[disabled] { opacity: .4; cursor: wait; }
    .persona-note { margin: 0; color: var(--muted); font-size: var(--fs-caption); }
    /* Fixed full-viewport terminal shell. A terminal is conventionally dark, and
       the portal canvas is light, so this surface pins its own near-black
       palette (the console terminal's) rather than reading page tokens. */
    .term-overlay {
      position: fixed;
      inset: 0;
      z-index: 60;
      height: 100dvh;
      display: flex;
      flex-direction: column;
      background: #0a0a0a;
    }
    .term-overlay-bar {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: var(--s2);
      padding: max(var(--s2), env(safe-area-inset-top)) max(var(--s3), env(safe-area-inset-right)) var(--s2) max(var(--s3), env(safe-area-inset-left));
      border-bottom: 1px solid #26262f;
      background: #101016;
    }
    .term-overlay-title {
      flex: 0 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #e8e8e8;
      font: 650 var(--fs-compact)/var(--lh-label) var(--font);
    }
    .term-overlay-status {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #a4a7b3;
      font-size: var(--fs-caption);
    }
    .term-overlay-status.is-bad { color: #ff8fa0; }
    .term-overlay-close {
      appearance: none;
      flex: 0 0 auto;
      min-width: 44px;
      min-height: 44px;
      padding: var(--s2) var(--s3);
      border: 1px solid #3a3a45;
      border-radius: var(--r-sm);
      background: #1c1c24;
      color: #e8e8e8;
      font: 600 var(--fs-compact)/var(--lh-label) var(--font);
      cursor: pointer;
    }
    .term-overlay-close:hover { border-color: var(--accent); }
    .term-overlay-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
    .term-overlay-host {
      flex: 1 1 auto;
      min-height: 0;
      padding: var(--s2) max(var(--s2), env(safe-area-inset-right)) max(var(--s2), env(safe-area-inset-bottom)) max(var(--s2), env(safe-area-inset-left));
    }
    .term-overlay-host .xterm { height: 100%; }
    /* A focused input under 16px makes phones zoom the page; xterm's hidden
       helper textarea is what actually holds keyboard focus. */
    .term-overlay-host .xterm-helper-textarea { font-size: 16px !important; }
    body.term-overlay-open { overflow: hidden; }
    /* ── Herald: the portal's always-there answer drawer ────────────────
       A customer with a question should not have to guess which tab hides
       the answer, so the launcher sits in the topbar beside the account
       menu and the drawer covers the page from the right. It is really
       modal — scrim, body scroll lock, and the Tab trap in the shared
       script — which is what earns the aria-modal="true" in the markup.
       The transcript is set as a document rather than as a chat app: the
       question is plain text and the answer is the framed artifact, so
       the two never need mirror-image alignment to be told apart. Every
       colour here is a token, which is also how the drawer follows
       :root[data-theme="dark"] without a second set of rules. */
    .herald-launcher {
      appearance: none;
      min-height: var(--s7);
      min-width: 44px;
      padding: var(--s1) var(--s3);
      border: 1px solid var(--line-strong);
      border-radius: var(--r-pill);
      background: var(--surface-1);
      color: var(--ink-2);
      font: 600 var(--fs-compact)/var(--lh-label) var(--font);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: var(--s2);
      transition: background var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
    }
    .herald-launcher .icon { color: var(--accent); }
    .herald-launcher:hover { border-color: var(--accent); background: var(--surface-2); color: var(--ink); }
    .herald-launcher:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
    .herald-launcher[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-tint); color: var(--ink); }
    .herald-scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); }
    .herald-panel {
      position: fixed;
      inset: 0 0 0 auto;
      z-index: 41;
      width: min(27rem, 100vw);
      height: 100dvh;
      border-left: 1px solid var(--line);
      background: var(--surface-1);
      box-shadow: var(--e3);
      display: flex;
      flex-direction: column;
      /* The dialog takes focus on open so the Tab trap has somewhere to
         start; a ring around the whole drawer would only report that back. */
      outline: none;
    }
    .herald-head {
      flex: 0 0 auto;
      display: flex;
      align-items: flex-start;
      gap: var(--s3);
      padding: max(var(--s4), env(safe-area-inset-top)) var(--s4) var(--s3);
      border-bottom: 1px solid var(--line);
    }
    .herald-title { margin: 0; font-size: var(--fs-h3); letter-spacing: var(--track-tight); }
    .herald-sub { max-width: 30ch; margin: var(--s1) 0 0; color: var(--muted); font-size: var(--fs-caption); }
    .herald-close {
      appearance: none;
      flex: 0 0 auto;
      min-width: 44px;
      min-height: 44px;
      margin-left: auto;
      padding: var(--s1) var(--s3);
      border: 1px solid var(--line);
      border-radius: var(--r-sm);
      background: var(--surface-2);
      color: var(--ink-2);
      font: 600 var(--fs-compact)/var(--lh-label) var(--font);
      cursor: pointer;
      transition: border-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
    }
    .herald-close:hover { border-color: var(--accent); color: var(--ink); }
    .herald-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
    .herald-log {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: var(--s4);
      display: flex;
      flex-direction: column;
      gap: var(--s4);
    }
    .herald-who { display: block; margin-bottom: var(--s1); color: var(--muted); font: 700 var(--fs-eyebrow)/var(--lh-label) var(--font); text-transform: uppercase; letter-spacing: var(--track-eyebrow); }
    .herald-said {
      margin: 0;
      color: var(--ink);
      font-size: var(--fs-body);
      line-height: var(--lh-body);
      /* Herald's answer is written with textContent, so the line breaks it
         chose are the only formatting it has; they must survive. */
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .herald-msg-you .herald-said { color: var(--ink-2); }
    .herald-msg-herald .herald-said {
      padding: var(--s3);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      background: var(--surface-2);
    }
    .herald-working { display: flex; align-items: center; gap: var(--s2); margin: 0; color: var(--muted); font-size: var(--fs-compact); }
    .herald-working::before { content: ""; flex: 0 0 auto; width: var(--s2); height: var(--s2); border-radius: var(--r-pill); background: var(--accent); }
    .herald-notice { flex-direction: column; align-items: flex-start; }
    .herald-notice p { margin: 0; }
    .herald-starters { flex: 0 0 auto; padding: 0 var(--s4) var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
    .herald-starters-label { margin: 0; color: var(--muted); font: 700 var(--fs-eyebrow)/var(--lh-label) var(--font); text-transform: uppercase; letter-spacing: var(--track-eyebrow); }
    .herald-starter {
      appearance: none;
      min-height: 44px;
      padding: var(--s2) var(--s3);
      border: 1px solid var(--line-strong);
      border-radius: var(--r-md);
      background: var(--surface-1);
      color: var(--ink-2);
      font: 600 var(--fs-compact)/var(--lh-label) var(--font);
      text-align: left;
      cursor: pointer;
      transition: background var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
    }
    .herald-starter:hover { border-color: var(--accent); background: var(--surface-2); color: var(--ink); }
    .herald-starter:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
    .herald-starter[disabled] { opacity: .4; cursor: wait; }
    .herald-form {
      flex: 0 0 auto;
      display: flex;
      align-items: flex-start;
      gap: var(--s2);
      padding: var(--s3) var(--s4) max(var(--s4), env(safe-area-inset-bottom));
      border-top: 1px solid var(--line);
    }
    .herald-form .input { flex: 1 1 auto; min-width: 0; }
    .herald-form .btn { flex: 0 0 auto; }
    body.herald-open { overflow: hidden; }
    /* ── Shared portal component contract ──────────────────────────────
       One vocabulary for every tab: grid cells, the visualization frame,
       the mail funnel, the support timeline, disclosures, and badges.
       Tabs emit these classes; only this stylesheet defines them. */
    .pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--s3); align-items: stretch; }
    .pgrid-hero { grid-column: 1 / -1; }
    .pcard {
      min-width: 0;
      padding: var(--s4);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      background: var(--surface-1);
      box-shadow: var(--e1);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--s2);
    }
    .pcard > .pdisclose, .pcard .kv { align-self: stretch; }
    .pcard-title { margin: 0; color: var(--muted); font: 700 var(--fs-eyebrow)/var(--lh-label) var(--font); text-transform: uppercase; letter-spacing: var(--track-eyebrow); }
    .pcard-value { margin: 0; color: var(--ink); font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--track-tight); overflow-wrap: anywhere; }
    .pcard-note { margin: 0; color: var(--ink-2); font-size: var(--fs-compact); }
    .pcard-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: auto; padding-top: var(--s1); }
    /* Inside a hero cell the title IS the big plain-language answer. */
    .pgrid-hero .pcard-title { color: var(--ink); font-size: clamp(var(--fs-h3), 2.6vw, var(--fs-h2)); text-transform: none; letter-spacing: var(--track-tight); }
    .pcard[data-tone="ok"] { border-color: color-mix(in srgb, var(--ok) 25%, var(--line)); background: linear-gradient(135deg, var(--surface-1), color-mix(in srgb, var(--ok) 7%, var(--surface-1))); }
    .pcard[data-tone="warn"] { border-color: color-mix(in srgb, var(--warn) 38%, var(--line)); background: linear-gradient(135deg, var(--surface-1), color-mix(in srgb, var(--warn) 9%, var(--surface-1))); }
    .pcard[data-tone="bad"] { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); background: linear-gradient(135deg, var(--surface-1), color-mix(in srgb, var(--bad) 8%, var(--surface-1))); }
    .pcard[data-tone="info"] { border-color: color-mix(in srgb, var(--info) 30%, var(--line)); background: linear-gradient(135deg, var(--surface-1), color-mix(in srgb, var(--info) 7%, var(--surface-1))); }
    /* The visualization frame keeps a real height so a slow or refused
       renderer can never leave a collapsed sliver where a chart should be. */
    .pviz { position: relative; min-height: 22rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; }
    .pviz > svg, .pviz > canvas { display: block; width: 100%; height: 22rem; touch-action: none; }
    /* Composed inside .pviz, the legacy graph shell drops its own frame. */
    .pviz .graph-shell { min-height: inherit; border: 0; border-radius: 0; background: transparent; }
    .pviz .graph-legend { padding: var(--s2) var(--s3) var(--s3); }
    .pviz-empty { position: relative; z-index: 1; min-height: inherit; padding: var(--s4); display: flex; flex-direction: column; justify-content: center; gap: var(--s2); color: var(--ink-2); }
    .pflow { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s3) var(--s5); margin: 0; padding: 0; list-style: none; }
    .pflow-stage {
      position: relative;
      flex: 1 1 8.5rem;
      min-width: 0;
      padding: var(--s3);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      background: var(--surface-1);
      color: var(--ink-2);
      font-size: var(--fs-compact);
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: var(--s1);
    }
    .pflow-stage + .pflow-stage::before { content: "\2192"; position: absolute; top: 50%; left: calc(var(--s5) / -2); transform: translate(-50%, -50%); color: var(--muted); font-size: var(--fs-h3); line-height: 1; }
    .pflow-count { display: block; color: var(--ink); font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--track-tight); }
    .ptimeline { position: relative; margin: 0; padding: 0 0 0 var(--s5); list-style: none; }
    .ptimeline::before { content: ""; position: absolute; left: .45rem; top: .55rem; bottom: .55rem; width: 2px; background: var(--line); }
    .ptimeline-item { position: relative; padding: 0 0 var(--s4); }
    .ptimeline-item:last-child { padding-bottom: 0; }
    .ptimeline-item::before { content: ""; position: absolute; left: calc(var(--s5) * -1 + .15rem); top: .4rem; width: .65rem; height: .65rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--surface-1); }
    .ptimeline-when { display: block; color: var(--muted); font-size: var(--fs-caption); }
    .ptimeline-what { display: block; margin-top: var(--s1); color: var(--ink); font-size: var(--fs-compact); overflow-wrap: anywhere; }
    .pdisclose { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-1); }
    .pdisclose > summary { list-style: none; display: flex; align-items: center; gap: var(--s2); min-height: 44px; padding: var(--s2) var(--s3); border-radius: inherit; color: var(--ink); font: 600 var(--fs-compact)/var(--lh-label) var(--font); cursor: pointer; }
    .pdisclose > summary::-webkit-details-marker { display: none; }
    .pdisclose > summary::after { content: "+"; margin-left: auto; color: var(--accent); font-weight: 700; }
    .pdisclose[open] > summary::after { content: "\2212"; }
    .pdisclose > summary:hover { background: var(--surface-2); }
    .pdisclose > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
    .pdisclose > :not(summary) { margin: 0 var(--s3) var(--s3); }
    .pbadge {
      display: inline-flex;
      align-items: center;
      gap: var(--s1);
      width: max-content;
      padding: var(--s1) var(--s2);
      border: 1px solid var(--line);
      border-radius: var(--r-pill);
      background: var(--surface-2);
      color: var(--ink-2);
      font: 600 var(--fs-caption)/var(--lh-label) var(--font);
      white-space: nowrap;
    }
    .pbadge[data-tone="ok"] { border-color: color-mix(in srgb, var(--ok) 30%, var(--line)); background: var(--ok-tint); color: var(--ok); }
    .pbadge[data-tone="warn"] { border-color: color-mix(in srgb, var(--warn) 30%, var(--line)); background: var(--warn-tint); color: var(--warn); }
    .pbadge[data-tone="bad"] { border-color: color-mix(in srgb, var(--bad) 30%, var(--line)); background: var(--bad-tint); color: var(--bad); }
    .pbadge[data-tone="info"] { border-color: color-mix(in srgb, var(--info) 30%, var(--line)); background: var(--info-tint); color: var(--info); }
    /* ── Home vs Business: one attribute, two surfaces ─────────────────
       The shell sets data-account-kind from /portal/me `category`. Home
       stays personal and warm; Business reads as an organization
       workspace: the company identity leads the sidebar, framing is
       denser, and the canvas is cooler. Same markup, same tokens — this
       attribute is the only fork. */
    body.customer-portal[data-account-kind="home"] {
      background:
        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34rem),
        radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--warn) 6%, transparent), transparent 30rem),
        var(--canvas);
    }
    body[data-account-kind="home"] .portal-welcome h1 { font-size: var(--fs-h2); }
    body.customer-portal[data-account-kind="business"] {
      background:
        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--ink) 5%, transparent), transparent 34rem),
        var(--canvas);
    }
    body[data-account-kind="business"] .portal-side {
      border-right-color: var(--line-strong);
      background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 4%, var(--surface-1)), color-mix(in srgb, var(--surface-1) 94%, transparent));
    }
    body[data-account-kind="business"] .portal-welcome h1 { font-size: var(--fs-body); font-weight: 650; }
    /* The identity block below names the company; the greeting must not. */
    body[data-account-kind="business"] .portal-welcome p { display: none; }
    body[data-account-kind="business"] .portal-page-head h2 { font-size: var(--fs-h2); }
    body[data-account-kind="business"] .section-card { border-radius: var(--r-md); }
    body[data-account-kind="business"] .pcard { padding: var(--s3); box-shadow: none; }
    body[data-account-kind="business"] .pgrid { gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
    .org-identity { display: none; }
    body[data-account-kind="business"] .org-identity {
      display: flex;
      align-items: center;
      gap: var(--s2);
      padding: var(--s2);
      border: 1px solid var(--line-strong);
      border-radius: var(--r-md);
      background: var(--surface-1);
      box-shadow: var(--e1);
    }
    .org-identity-logo {
      position: relative;
      flex: 0 0 auto;
      width: var(--s7);
      height: var(--s7);
      border-radius: var(--r-sm);
      overflow: hidden;
      display: grid;
      place-items: center;
      background: var(--accent-tint);
      color: var(--accent-hi);
      font-weight: 700;
    }
    .org-identity-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--surface-1); }
    .org-identity-text { min-width: 0; display: flex; flex-direction: column; }
    .org-identity-kicker { color: var(--muted); font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-eyebrow); }
    .org-identity-name { color: var(--ink); font-weight: 700; font-size: var(--fs-compact); overflow-wrap: anywhere; }
    /* Inline company logo inside a card (org overview identity cell). */
    .pcard-logo, .pcard-logo-fallback { flex: 0 0 auto; width: 88px; height: 88px; border-radius: var(--r-sm); background: var(--surface-2); }
    .pcard-logo { object-fit: contain; display: block; }
    .pcard-logo-fallback { display: inline-grid; place-items: center; background: var(--accent-tint); color: var(--accent-hi); font-size: var(--fs-h2); font-weight: 700; }
    /* Business reads denser and squarer everywhere else; Herald follows. */
    body[data-account-kind="business"] .herald-log { gap: var(--s3); }
    body[data-account-kind="business"] .herald-msg-herald .herald-said { border-radius: var(--r-sm); }
    body[data-account-kind="business"] .herald-starter { border-radius: var(--r-sm); }
    /* Fingers need 44px targets, and an input under 16px makes phones zoom. */
    @media (pointer: coarse) {
      .portal-content .btn, .pdisclose > summary, .pcard-actions > *, .account-menu button, .preview-persona, .preview-exit, .persona-option, .back-link { min-height: 44px; }
      .input, .select, .textarea { min-height: 44px; font-size: max(16px, 1em); }
    }
    @media (max-width: 900px) {
      .portal-app { grid-template-columns: 1fr; padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
      .portal-side { position: fixed; inset: auto 0 0; height: auto; padding: var(--s2) env(safe-area-inset-right) max(var(--s2), env(safe-area-inset-bottom)) env(safe-area-inset-left); border-right: 0; border-top: 1px solid var(--line); }
      .portal-side .portal-brand, .portal-welcome, .org-identity, #clientSwitcher { display: none !important; }
      .customer-portal .portal-tabs { flex-direction: row; gap: 0; }
      .portal-tab { flex: 1 1 0; min-width: min-content; min-height: 3.4rem; padding: var(--s1) 0; border: 0; justify-content: center; text-align: center; flex-direction: column; gap: .2rem; font-size: .72rem; overflow-wrap: normal; }
      .portal-main { padding: var(--s3); }
      .portal-topbar { margin: calc(var(--s3) * -1) calc(var(--s3) * -1) var(--s3); padding-inline: var(--s3); }
      .preview-banner { flex-basis: calc(100% + (var(--s3) * 2)); margin-inline: calc(var(--s3) * -1); padding-inline: var(--s3); grid-template-columns: minmax(0, 1fr) auto; }
      .preview-banner .plist-actions { grid-column: 1 / -1; }
      .account-menu { right: var(--s3); }
      .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .two-col { grid-template-columns: 1fr; }
    }
    @media (max-width: 520px) {
      .herald-panel { width: 100vw; border-left: 0; }
      .herald-head, .herald-starters, .herald-form { padding-inline: var(--s3); }
      .herald-log { padding: var(--s3); }
      .metric-grid { grid-template-columns: 1fr 1fr; }
      .metric-card { padding: var(--s3); }
      .answer-card { flex-direction: column; }
      .preview-banner { grid-template-columns: 1fr; }
      .preview-personas { width: 100%; }
      .preview-persona { flex: 1 1 0; }
      .preview-banner .plist-actions { grid-column: auto; justify-content: flex-start; }
      .preview-persona, .preview-exit, .preview-banner a, .dl-more-summary, .back-link { min-height: var(--s7); }
      .back-link { padding-inline: var(--s2); }
      .preview-banner a { display: inline-flex; align-items: center; }
      .dl-hero { padding: var(--s4); }
      .dl-hero-actions > * { flex: 1 1 100%; }
      .dl-row { align-items: flex-start; flex-wrap: wrap; }
      .dl-row-action { width: 100%; }
      .dl-row-action > * { flex: 1 1 100%; }
      .state-panel { min-height: calc(var(--s8) * 2); padding: var(--s5) var(--s4); }
      .graph-shell, .graph-shell svg { min-height: 18rem; height: 18rem; }
      .pviz { min-height: 18rem; }
      .pviz > svg, .pviz > canvas { height: 18rem; }
      .pflow { flex-direction: column; gap: var(--s4); }
      .pflow-stage + .pflow-stage::before { content: "\2193"; top: calc(var(--s4) / -2); left: 50%; }
    }
    @media (prefers-reduced-motion: reduce) {
      /* Force-directed charts animate by nature; show the text alternative
         instead. Renderers unhide .pviz-empty / .graph-fallback here. */
      .graph-shell svg, .pviz > svg, .pviz > canvas { display: none; }
      * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
    }
    /* Motion, gated on the visitor's preference — the same gate site.css puts
       the skeleton shimmer behind. The working dot is the only thing on the
       page saying Herald is still thinking, so it pulses rather than spins. */
    @media (prefers-reduced-motion: no-preference) {
      .herald-working::before { animation: herald-thinking 1.2s var(--ease) infinite; }
      @keyframes herald-thinking { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
    }