:root {
      color-scheme: light;
      --sg24-bg: #f5f7fb;
      --sg24-bg-page-start: #eef3f8;
      --sg24-bg-page-end: #eef2f8;
      --sg24-surface: rgba(255, 255, 255, 0.96);
      --sg24-surface-strong: #ffffff;
      --sg24-surface-muted: #f3f6fb;
      --sg24-line: rgba(148, 163, 184, 0.28);
      --sg24-line-strong: rgba(66, 153, 225, 0.24);
      --sg24-text: #102038;
      --sg24-text-muted: #5b6b84;
      --sg24-primary: #1f4ed8;
      --sg24-primary-hover: #183fb2;
      --sg24-primary-soft: rgba(31, 78, 216, 0.11);
      --sg24-accent: #0f766e;
      --sg24-danger: #b42318;
      --sg24-warning: #b54708;
      --sg24-success: #166534;
      --sg24-shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.06);
      --sg24-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
      --sg24-shadow-lg: 0 18px 44px rgba(6, 15, 30, 0.18);
      --sg24-radius-sm: 6px;
      --sg24-radius-md: 8px;
      --sg24-radius-lg: 10px;
    }
    :root {
      --bg: var(--sg24-bg);
      --surface: rgba(255, 255, 255, 0.92);
      --surface-strong: var(--sg24-surface-strong);
      --line: var(--sg24-line);
      --text: var(--sg24-text);
      --muted: var(--sg24-text-muted);
      --primary: var(--sg24-primary);
      --primary-strong: #13264a;
      --accent: var(--sg24-accent);
      --danger: var(--sg24-danger);
      --warning: var(--sg24-warning);
      --success: var(--sg24-success);
      --shadow: var(--sg24-shadow);
      --radius-xl: var(--sg24-radius-lg);
      --radius-lg: var(--sg24-radius-md);
      --radius-md: var(--sg24-radius-md);
      --radius-sm: var(--sg24-radius-sm);
      --container: 1180px;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      background: linear-gradient(180deg, #eef3f8 0%, var(--bg) 42%, #eef2f8 100%);
      color: var(--text);
    }

    a {
      color: var(--primary);
      text-decoration-thickness: 0.08em;
      text-underline-offset: 0.16em;
    }

    button,
    input,
    textarea,
    select {
      font: inherit;
    }

    .page-shell {
      width: min(calc(100% - 32px), var(--container));
      margin: 0 auto;
      padding: 28px 0 64px;
    }

    .hero {
      display: grid;
      gap: 24px;
      grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
      padding: 24px;
      border: 1px solid rgba(255, 255, 255, 0.5);
      border-radius: var(--radius-xl);
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(26, 45, 84, 0.94));
      color: #eff6ff;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }

    body.customer-authenticated .page-shell {
      padding-top: 18px;
    }

    body.customer-authenticated .hero {
      display: none;
    }

    body.customer-authenticated {
      background: linear-gradient(180deg, #eef3f8 0%, var(--bg) 46%, #eef2f8 100%);
    }

    .customer-appbar {
      display: grid;
      grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1fr) minmax(220px, 0.82fr) auto;
      gap: 16px;
      align-items: center;
      margin-bottom: 18px;
      padding: 14px 16px;
      border: 1px solid rgba(148, 163, 184, 0.24);
      border-radius: var(--radius-lg);
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    }

    .customer-appbar__brand,
    .customer-appbar__actions {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .customer-appbar__brand img {
      width: 42px;
      height: 42px;
      padding: 8px;
      border-radius: 8px;
      background: rgba(15, 23, 42, 0.04);
      border: 1px solid rgba(15, 23, 42, 0.06);
    }

    .customer-appbar__brand span,
    .customer-appbar__stats span,
    .customer-appbar__actions span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .customer-appbar__brand strong {
      display: block;
      color: var(--text);
      font-size: 1rem;
      line-height: 1.25;
    }

    .customer-appbar__stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .customer-appbar__stats div {
      min-width: 0;
      padding: 9px 11px;
      border: 1px solid rgba(148, 163, 184, 0.18);
      border-radius: var(--radius-sm);
      background: rgba(248, 250, 252, 0.82);
    }

    .customer-appbar__stats strong {
      display: block;
      margin-top: 2px;
      color: var(--text);
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .customer-appbar__actions {
      justify-content: flex-end;
      flex-wrap: wrap;
    }

    .customer-appbar__nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .customer-appbar__nav a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 10px 12px;
      border: 1px solid rgba(148, 163, 184, 0.22);
      border-radius: var(--radius-sm);
      background: rgba(248, 250, 252, 0.8);
      color: var(--text);
      font-size: 13px;
      font-weight: 800;
      text-decoration: none;
    }

    .customer-appbar__nav a:hover,
    .customer-appbar__nav a:focus-visible {
      border-color: rgba(31, 78, 216, 0.34);
      background: #fff;
      outline: none;
    }

    .customer-appbar__actions > span {
      max-width: 220px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .hero__copy,
    .hero__status {
      position: relative;
      z-index: 1;
    }

    .brand-lockup {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 18px;
    }

    .brand-lockup img {
      width: 52px;
      height: 52px;
      border-radius: 8px;
      padding: 10px;
      background: rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(10px);
    }

    .eyebrow {
      display: block;
      margin-bottom: 4px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(191, 219, 254, 0.92);
    }

    .hero h1 {
      margin: 0;
      font-size: clamp(1.8rem, 3.2vw, 2.6rem);
      line-height: 1.08;
    }

    .hero p {
      margin: 14px 0 0;
      max-width: 60ch;
      color: rgba(226, 232, 240, 0.92);
      line-height: 1.6;
    }

    .locale-switcher {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 10px;
      font-size: 14px;
      color: rgba(191, 219, 254, 0.92);
    }

    .locale-switcher a {
      color: inherit;
      text-decoration: none;
    }

    .locale-switcher strong {
      color: #ffffff;
    }

    .hero__chips,
    .hero__stats {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }

    .hero__chip,
    .stat-card {
      border: 1px solid rgba(191, 219, 254, 0.2);
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(14px);
    }

    .hero__chip {
      display: inline-flex;
      align-items: center;
      padding: 10px 14px;
      border-radius: 999px;
      font-size: 13px;
      color: #dbeafe;
    }

    .hero__status {
      display: grid;
      gap: 14px;
      align-content: start;
    }

    .stat-card {
      padding: 18px;
      border-radius: 8px;
    }

    .stat-card strong,
    .stat-card span {
      display: block;
    }

    .stat-card strong {
      font-size: 1.35rem;
      margin-top: 6px;
    }

    .stat-card span:last-child {
      margin-top: 6px;
      color: rgba(219, 234, 254, 0.86);
      font-size: 14px;
      line-height: 1.5;
    }

    .alert {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin: 20px 0 0;
      padding: 14px 16px;
      border-radius: 8px;
      border: 1px solid transparent;
      background: rgba(255, 255, 255, 0.84);
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    }

    .alert--success { border-color: rgba(22, 101, 52, 0.18); color: var(--success); }
    .alert--error { border-color: rgba(180, 35, 24, 0.18); color: var(--danger); }
    .alert--info { border-color: rgba(29, 78, 216, 0.18); color: #1d4ed8; }

    .alert__actions {
      display: inline-flex;
      align-items: flex-start;
      gap: 8px;
    }

    .alert__dismiss {
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      cursor: pointer;
      font-size: 20px;
      line-height: 1;
    }

    .alert__action {
      min-height: 38px;
      padding: 0 12px;
    }

    .manual-copy-field {
      display: block;
      width: min(100%, 720px);
      margin-top: 10px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: #fff;
      color: var(--text);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 0.84rem;
      line-height: 1.45;
    }

    .dashboard {
      display: grid;
      gap: 24px;
      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
      margin-top: 24px;
    }

    .dashboard--authenticated {
      margin-top: 0;
      gap: 18px;
    }

    .customer-next-steps {
      display: grid;
      grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
      gap: 16px;
      align-items: stretch;
      margin-bottom: 18px;
    }

    .customer-next-steps__intro,
    .customer-step {
      border: 1px solid rgba(148, 163, 184, 0.22);
      border-radius: var(--radius-lg);
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    }

    .customer-next-steps__intro {
      display: grid;
      gap: 7px;
      align-content: center;
      padding: 18px;
    }

    .customer-next-steps__intro h2 {
      margin: 0;
      color: var(--text);
      font-size: 1.2rem;
      line-height: 1.25;
    }

    .customer-next-steps__intro p {
      margin: 0;
      color: var(--muted);
      line-height: 1.6;
    }

    .customer-next-steps__grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .customer-step {
      display: grid;
      gap: 6px;
      align-content: start;
      min-height: 126px;
      padding: 16px;
      color: var(--text);
      text-decoration: none;
    }

    .customer-step strong {
      font-size: 0.96rem;
      line-height: 1.25;
    }

    .customer-step span {
      color: var(--muted);
      font-size: 0.88rem;
      line-height: 1.55;
    }

    .customer-step[href]:hover,
    .customer-step[href]:focus-visible,
    .customer-step__action:hover,
    .customer-step__action:focus-visible {
      border-color: rgba(31, 78, 216, 0.34);
      background: #fff;
      outline: none;
    }

    .customer-step__action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      justify-self: start;
      margin-top: 4px;
      min-height: 44px;
      padding: 0 12px;
      border: 1px solid rgba(148, 163, 184, 0.22);
      border-radius: var(--radius-sm);
      color: var(--primary);
      font-weight: 800;
      font-size: 0.84rem;
      text-decoration: none;
    }

    .customer-step__action--muted {
      color: var(--muted);
      background: rgba(248, 250, 252, 0.82);
    }

    .stack {
      display: grid;
      gap: 20px;
      align-content: start;
    }

    .card {
      background: rgba(255, 255, 255, 0.94);
      border: 1px solid rgba(148, 163, 184, 0.2);
      border-radius: var(--radius-lg);
      padding: 20px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
    }

    .card h2,
    .card h3,
    .card p {
      margin-top: 0;
    }

    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0;
      border-radius: 0;
      background: transparent;
      color: var(--primary);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .muted {
      color: var(--muted);
      line-height: 1.6;
    }

    .account-meta {
      display: grid;
      gap: 10px;
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid var(--line);
    }

    .account-meta div {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
      font-size: 14px;
    }

    .account-meta dt,
    .account-meta dd {
      margin: 0;
    }

    .account-meta dt {
      color: var(--muted);
      font-weight: 600;
    }

    .account-meta dd {
      color: var(--text);
      font-weight: 700;
      overflow-wrap: anywhere;
      text-align: right;
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 18px;
    }

    .btn,
    button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      padding: 0 16px;
      border-radius: 8px;
      border: 1px solid transparent;
      cursor: pointer;
      transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
    }

    .btn:hover,
    button:hover {
      transform: translateY(-1px);
    }

    .btn:disabled,
    button:disabled {
      cursor: not-allowed;
      opacity: 0.55;
      transform: none;
      box-shadow: none;
    }

    .btn--primary,
    button[type="submit"] {
      background: linear-gradient(135deg, var(--primary), #245fcf);
      color: #fff;
      box-shadow: 0 14px 30px rgba(37, 99, 235, 0.22);
    }

    .btn--secondary {
      background: rgba(255, 255, 255, 0.88);
      border-color: rgba(148, 163, 184, 0.28);
      color: var(--text);
    }

    .btn--ghost {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(191, 219, 254, 0.18);
      color: #eff6ff;
    }

    form {
      display: grid;
      gap: 14px;
    }

    .form-grid {
      display: grid;
      gap: 14px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    label {
      display: grid;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
    }

    input,
    textarea,
    select {
      width: 100%;
      padding: 12px 14px;
      border-radius: 8px;
      border: 1px solid rgba(148, 163, 184, 0.34);
      background: rgba(255, 255, 255, 0.92);
      color: var(--text);
      outline: none;
      transition: border-color 140ms ease, box-shadow 140ms ease;
    }

    input:focus,
    textarea:focus,
    select:focus {
      border-color: rgba(31, 78, 216, 0.54);
      box-shadow: 0 0 0 4px rgba(31, 78, 216, 0.12);
    }

    a:focus-visible,
    button:focus-visible,
    .btn:focus-visible {
      outline: 2px solid rgba(31, 78, 216, 0.66);
      outline-offset: 3px;
      border-radius: 6px;
    }

    textarea {
      min-height: 128px;
      resize: vertical;
    }

    .helper {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.55;
    }

    .helper a,
    .message a,
    .footer-note a {
      color: var(--primary);
      font-weight: 700;
    }

    .section-title {
      margin-top: 14px;
    }

    .ticket-list {
      display: grid;
      gap: 18px;
    }

    .ticket {
      border: 1px solid rgba(148, 163, 184, 0.2);
      border-radius: 8px;
      background: #ffffff;
      padding: 18px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
    }

    .ticket__header {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 14px;
      align-items: flex-start;
    }

    .ticket__title {
      margin: 8px 0 0;
      font-size: 1.1rem;
    }

    .ticket__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 11px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.02em;
      line-height: 1.25;
    }

    .pill::before {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 12px;
      font-size: 11px;
      line-height: 1;
    }

    .pill--status-open,
    .pill--priority-high {
      background: rgba(30, 64, 175, 0.1);
      color: #1d4ed8;
      border-color: rgba(30, 64, 175, 0.16);
    }

    .pill--status-open::before,
    .pill--priority-high::before {
      content: 'i';
    }

    .pill--status-in_progress,
    .pill--status-investigating,
    .pill--status-waiting-customer,
    .pill--priority-urgent {
      background: rgba(180, 83, 9, 0.12);
      color: var(--warning);
      border-color: rgba(180, 83, 9, 0.18);
    }

    .pill--status-in_progress::before,
    .pill--status-investigating::before,
    .pill--status-waiting-customer::before,
    .pill--priority-urgent::before {
      content: '!';
    }

    .pill--status-resolved,
    .pill--status-closed,
    .pill--priority-normal,
    .pill--priority-medium {
      background: rgba(22, 101, 52, 0.12);
      color: var(--success);
      border-color: rgba(22, 101, 52, 0.16);
    }

    .pill--status-resolved::before,
    .pill--status-closed::before,
    .pill--priority-normal::before,
    .pill--priority-medium::before {
      content: '✓';
    }

    .pill--priority-low,
    .pill--default {
      background: rgba(71, 85, 105, 0.12);
      color: #334155;
      border-color: rgba(71, 85, 105, 0.16);
    }

    .pill--priority-low::before,
    .pill--default::before {
      content: '–';
    }

    .ticket__body {
      margin: 14px 0 0;
      color: #1e293b;
      line-height: 1.6;
      white-space: pre-wrap;
    }

    .ticket-facts {
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid rgba(148, 163, 184, 0.16);
    }

    .ticket-attachments {
      display: grid;
      gap: 8px;
      margin-top: 12px;
    }

    .ticket-attachments__label {
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .ticket-attachments__list {
      display: grid;
      gap: 8px;
    }

    .ticket-attachment {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      width: 100%;
      min-height: 44px;
      padding: 10px 12px;
      border: 1px solid rgba(148, 163, 184, 0.2);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.94);
      color: var(--primary);
      font-weight: 700;
      text-decoration: none;
      overflow-wrap: anywhere;
    }

    .ticket-attachment:hover,
    .ticket-attachment:focus-visible {
      border-color: rgba(31, 78, 216, 0.34);
      background: #fff;
      outline: none;
    }

    .ticket-attachment--blocked {
      color: var(--text);
      background: rgba(248, 250, 252, 0.88);
    }

    .ticket-attachment__status {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.45;
    }

    .release-card {
      padding: 18px;
      border: 1px solid rgba(37, 99, 235, 0.18);
      border-radius: 8px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
    }

    .release-card__header,
    .release-card__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: flex-start;
      justify-content: space-between;
    }

    .release-card__title {
      margin: 8px 0 0;
      color: var(--text);
      font-size: 1.12rem;
      line-height: 1.25;
    }

    .release-card__body {
      margin: 14px 0 0;
      color: #1e293b;
      line-height: 1.6;
      white-space: pre-wrap;
    }

    .release-card__layout {
      display: grid;
      grid-template-columns: minmax(180px, 0.8fr) minmax(260px, 1.2fr);
      gap: 16px;
      align-items: start;
      margin-top: 16px;
    }

    .release-facts {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 12px;
      border: 1px solid rgba(148, 163, 184, 0.18);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.74);
    }

    .release-facts div,
    .release-facts dt,
    .release-facts dd {
      margin: 0;
    }

    .release-facts dt {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .release-facts dd {
      margin-top: 2px;
      color: var(--text);
      font-weight: 700;
    }

    .release-actions,
    .release-artifacts {
      display: grid;
      gap: 10px;
    }

    .release-artifacts {
      padding-top: 10px;
      border-top: 1px solid rgba(148, 163, 184, 0.16);
    }

    .release-artifact {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    }

    .release-artifact:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }

    .release-artifact span,
    .release-artifact small {
      display: block;
      min-width: 0;
    }

    .release-artifact strong {
      color: var(--text);
      overflow-wrap: anywhere;
    }

    .release-artifact small {
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .message-list {
      display: grid;
      gap: 12px;
      margin-top: 18px;
    }

    .message {
      padding: 14px 16px;
      border-radius: 8px;
      background: #f8fbff;
      border: 1px solid rgba(191, 219, 254, 0.28);
    }

    .message--customer {
      background: #eff6ff;
      border-color: rgba(96, 165, 250, 0.24);
    }

    .message--email {
      background: #f0fdf4;
      border-color: rgba(74, 222, 128, 0.24);
    }

    .message__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: space-between;
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 8px;
    }

    .message__body {
      white-space: pre-wrap;
      line-height: 1.6;
      color: #1e293b;
    }

    .ticket-reply {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--line);
    }

    .empty-state {
      display: grid;
      justify-items: center;
      gap: 6px;
      padding: 22px;
      border-radius: 8px;
      border: 1px dashed rgba(148, 163, 184, 0.46);
      background: rgba(248, 250, 252, 0.88);
      color: var(--muted);
      text-align: center;
      line-height: 1.6;
    }

    .empty-state strong {
      color: var(--text);
      font-weight: 800;
    }

    .empty-state span {
      max-width: 42rem;
    }

    .empty-state--loading {
      border-style: solid;
      border-color: rgba(31, 78, 216, 0.16);
      background: rgba(31, 78, 216, 0.05);
    }

    .empty-state--error {
      border-style: solid;
      border-color: rgba(180, 35, 24, 0.2);
      background: rgba(180, 35, 24, 0.05);
    }

    .empty-state__actions {
      margin-top: 8px;
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .login-card {
      max-width: 520px;
    }

    .footer-note {
      margin-top: 24px;
      text-align: center;
      color: var(--muted);
      font-size: 13px;
    }

    .footer-note a {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: 0 4px;
    }

    @media (max-width: 980px) {
      .hero,
      .dashboard,
      .customer-next-steps,
      .customer-appbar {
        grid-template-columns: 1fr;
      }

      .customer-next-steps__grid {
        grid-template-columns: 1fr;
      }

      .customer-appbar__nav,
      .customer-appbar__actions {
        justify-content: flex-start;
      }

      .customer-appbar__nav a {
        flex: 1 1 150px;
        justify-content: center;
      }
    }

    @media (max-width: 640px) {
      .page-shell {
        width: min(calc(100% - 20px), var(--container));
        padding-top: 20px;
      }

      .card[id] {
        scroll-margin-top: 16px;
      }

      .hero,
      .card,
      .ticket,
      .release-card {
        padding: 18px;
      }

      .form-grid {
        grid-template-columns: 1fr;
      }

      .button-row,
      .ticket__header,
      .customer-appbar__actions,
      .release-card__header,
      .release-card__meta {
        flex-direction: column;
        align-items: stretch;
      }

      .customer-appbar__stats {
        grid-template-columns: 1fr;
      }

      .customer-appbar__nav a,
      .customer-step__action {
        width: 100%;
      }

      .release-card__layout,
      .release-artifact {
        grid-template-columns: 1fr;
      }

      .customer-next-steps__intro p {
        display: none;
      }

      .account-meta div {
        display: grid;
        gap: 3px;
      }

      .account-meta dd {
        text-align: left;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
      }

      .btn:hover,
      button:hover {
        transform: none;
      }
    }