/* ══════════════════════════════════════════════════════════
   ALTERA IT CHAT — CONSOLIDATED STYLESHEET
   Shared across: Chat_Page.html, Non_SSO_Login_Page.html,
                  Altera_IT_Chat_Landing_Page.html

   Structure:
     1. Reset
     2. Design tokens
     3. Page shell (html/body, background layers)
     4. Header (shared)
     5. 3-column grid layout (shared)
     6. Info card + phone list + portal link (shared)
     7. Footer (shared)
     8. Shared responsive rules
     9. Page-specific sections, scoped with a body class:
          body.chat-page    → Chat_Page.html
          body.login-page   → Non_SSO_Login_Page.html
          body.landing-page → Altera_IT_Chat_Landing_Page.html
   ══════════════════════════════════════════════════════════ */

/* ── 1. Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── 2. Design tokens (superset of all three pages) ── */
:root {
  --brand-dark:    #363694;
  --brand-mid:     #5151C6;
  --brand-light:   #7B7BE0;
  --brand-pale:    #A8A8EE;
  --accent:        #F07272;
  --accent-light:  #F9A8A8;
  --white:         #FFFFFF;

  --glass-bg:        rgba(255,255,255,0.10);
  --glass-bg-strong: rgba(255,255,255,0.14);
  --glass-border:    rgba(255,255,255,0.20);
  --glass-border-hi: rgba(255,255,255,0.30);

  --on-glass-heading: rgba(255,255,255,0.97);
  --on-glass-body:    rgba(255,255,255,0.72);
  --on-glass-muted:   rgba(255,255,255,0.50);
  --on-glass-divider: rgba(255,255,255,0.13);

  --shadow-card:  0 24px 64px rgba(20,20,80,0.35), 0 4px 16px rgba(20,20,80,0.20);
  --shadow-btn:   0 4px 16px rgba(80,80,200,0.35);
  --radius-card:  20px;
  --radius-btn:   10px;

  --success:       #22C55E;
  --success-ring:  rgba(34,197,94,0.20);
  --error-colour:  #F87171;
}

/* ── 3. Page shell ── */
html, body {
  height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

body {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-mid) 45%, var(--brand-light) 100%);
  display: flex;
  flex-direction: column;
}

/* chatsession + non-sso pages pin the gradient while scrolling */
body.chat-page,
body.login-page {
  background-attachment: fixed;
}

/* Subtle grid texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* Coral ambient glow, bottom-right */
body::after {
  content: '';
  position: fixed;
  bottom: -60px; right: -60px;
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(240,114,114,0.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* ── 4. Header (shared) ── */
header {
  position: relative;
  z-index: 10;
  padding: clamp(12px,2vw,20px) clamp(16px,4vw,40px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(30,30,100,0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.header-brand { display: flex; align-items: center; gap: 14px; }
.logo-lockup  { display: flex; flex-direction: column; line-height: 1; }

/* Real logo image asset (used on the .aspx pages in place of the text wordmark) */
.header-brand img.logo {
  height: 38px;
  width: auto;
  display: block;
}

.logo-wordmark {
  font-size: clamp(20px,3vw,28px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.5px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.logo-dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 1px;
  transform: rotate(-15deg) translateY(-4px);
  margin-left: 1px;
}

.logo-sub {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 4px;
  color: var(--brand-pale);
  text-transform: uppercase;
  margin-top: 4px;
  padding-left: 2px;
}

.header-divider { width: 1px; height: 32px; background: var(--glass-border); }

.header-title {
  font-size: clamp(12px,1.5vw,14px);
  font-weight: 500;
  color: rgba(255,255,255,0.80);
  letter-spacing: 0.3px;
}

/* ── 5. 3-column grid layout (shared) ── */
.page-main {
  position: relative;
  z-index: 10;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: clamp(24px,4vw,48px) clamp(16px,3vw,32px);
  gap: 24px;
}

/* ── 6. Info card + phone list + portal link (shared) ── */
.info-card {
  grid-column: 1;
  justify-self: start;
  align-self: start;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  padding: clamp(20px,2.5vw,32px) clamp(16px,2vw,28px);
  width: min(300px, 88vw);
  color: var(--white);
}

.info-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.info-card-title svg { flex-shrink: 0; }

.info-card-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.68);
  margin-bottom: 22px;
  line-height: 1.6;
}

.phone-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.phone-list li     { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.phone-flag        { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.phone-info strong {
  display: block;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  line-height: 1.3;
}
.phone-info span   { font-size: 12px; color: rgba(255,255,255,0.55); }

.info-divider { border: none; border-top: 1px solid var(--glass-border); margin: 20px 0; }

.portal-link-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.portal-link-text        { font-size: 12.5px; color: rgba(255,255,255,0.68); line-height: 1.5; }
.portal-link-text strong { display: block; color: rgba(255,255,255,0.88); font-weight: 600; margin-bottom: 2px; }

/* Chat_Page.html + Non_SSO_Login_Page.html use .service-portal-btn;
   Altera_IT_Chat_Landing_Page.html uses .btn-portal — same styling, kept
   as a combined selector so no HTML class renaming was needed. */
.service-portal-btn,
.btn-portal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: rgba(240,114,114,0.18);
  border: 1px solid rgba(240,114,114,0.40);
  border-radius: 8px;
  color: var(--accent-light);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.service-portal-btn:hover,
.btn-portal:hover {
  background: rgba(240,114,114,0.32);
  border-color: var(--accent);
  color: var(--white);
}

/* ── ServiceNow rich-text alert content (from <%=alertHTML %>) ──
   Editors use a plain WYSIWYG tool, so this only ever contains generic
   tags like <p>, <strong>, <a>, <ul>/<li> — no custom classes. These
   rules give that plain markup sensible, legible defaults against the
   dark glass cards, and collapse the wrapper to nothing when the field
   is empty so it doesn't leave a gap when there's no active alert. */
.cms-alert:empty { display: none; margin: 0; }

.cms-alert {
  color: rgba(255,255,255,0.85);
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.cms-alert p { margin-bottom: 10px; }
.cms-alert p:last-child { margin-bottom: 0; }
.cms-alert a { color: var(--accent-light); text-decoration: underline; }
.cms-alert a:hover { color: var(--white); }
.cms-alert strong, .cms-alert b { color: var(--white); font-weight: 700; }
.cms-alert em, .cms-alert i { font-style: italic; }
.cms-alert ul, .cms-alert ol { margin: 8px 0 10px 20px; }
.cms-alert li { margin-bottom: 4px; }
.cms-alert h1, .cms-alert h2, .cms-alert h3,
.cms-alert h4, .cms-alert h5, .cms-alert h6 {
  color: var(--white);
  margin-bottom: 8px;
  line-height: 1.35;
}

/* ── 7. Footer (shared) ── */
footer {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 16px 24px 20px;
  font-size: 12px;
  color: rgba(255,255,255,0.40);
  border-top: 1px solid var(--glass-border);
}

/* ── 8. Shared responsive rules ── */
@media (max-width: 500px) {
  header    { padding: 14px 16px; }
  .logo-sub { display: none; }
}

@media (max-width: 360px) {
  .header-divider,
  .header-title { display: none; }
}


/* ══════════════════════════════════════════════════════════
   9a. CHAT PAGE  (Chat_Page.html)  — body class: chat-page
   ══════════════════════════════════════════════════════════ */

/* MAIN CONTENT — col 2 */
body.chat-page .main-content {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: min(480px, 88vw);
}

body.chat-page .chat-status-card {
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  padding: 40px 32px;
  text-align: center;
  color: var(--white);
}

body.chat-page .status-icon-wrap {
  width: 74px; height: 74px;
  background: var(--success-ring);
  border: 1.5px solid rgba(34,197,94,0.40);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  animation: iconPulse 2.8s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { box-shadow: 0 0 0 0    rgba(34,197,94,0.30); }
  50%       { box-shadow: 0 0 0 12px rgba(34,197,94,0);    }
}

body.chat-page .check-svg {
  width: 36px; height: 36px;
  stroke: var(--success);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

body.chat-page .check-path {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: drawCheck 0.55s cubic-bezier(0.65,0,0.45,1) 0.25s forwards;
}

@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}

body.chat-page .chat-status-card h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--white);
}

body.chat-page .chat-status-card p {
  font-size: 14px;
  color: rgba(255,255,255,0.72);
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.65;
}

/* TROUBLESHOOT PANEL */
body.chat-page .troubleshoot-box {
  display: none;
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(240,200,100,0.35);
  border-radius: 16px;
  padding: 24px 26px;
  color: var(--white);
  animation: slideDown 0.25s ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0);    }
}

body.chat-page .troubleshoot-box h4 {
  font-size: 15px;
  font-weight: 700;
  color: #FDE68A;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

body.chat-page .troubleshoot-box ul  { list-style: none; padding: 0; }
body.chat-page .troubleshoot-box > ul > li { font-size: 13px; color: rgba(255,255,255,0.82); }

body.chat-page .troubleshoot-box > ul > li > ul {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.chat-page .troubleshoot-box > ul > li > ul > li {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.80);
  line-height: 1.7;
}

body.chat-page .troubleshoot-box strong { color: #FDE68A; font-weight: 600; }
body.chat-page .troubleshoot-box em     { color: rgba(255,255,255,0.75); font-style: normal; font-weight: 500; }

body.chat-page kbd {
  display: inline-block;
  padding: 1px 7px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 4px;
  font-family: 'Inter', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--white);
}

body.chat-page .troubleshoot-close {
  position: absolute;
  top: 12px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 6px;
  color: rgba(255,255,255,0.75);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
body.chat-page .troubleshoot-close:hover {
  background: rgba(240,114,114,0.30);
  border-color: rgba(240,114,114,0.55);
  color: var(--white);
}
body.chat-page .troubleshoot-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* UNIFIED CHAT LAUNCH WIDGET */
body.chat-page {
  /* Genesys auto-injects its own round launcher bubble in the bottom-right
     corner (outside our markup, so we can't size it directly). This gives
     the widget card enough clearance to sit above it instead of overlapping.
     Bump this value up/down if the bubble size changes. */
  --genesys-bubble-clearance: 96px;
}

body.chat-page .chat-widget-card {
  position: fixed;
  bottom: var(--genesys-bubble-clearance);
  right: 28px;
  z-index: 999;
  width: clamp(380px, 46vw, 520px);
  background: rgba(255,255,255,0.13);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 18px;
  box-shadow:
    0 12px 40px rgba(20,20,80,0.40),
    0 2px  8px  rgba(20,20,80,0.25),
    inset 0 1px 0 rgba(255,255,255,0.18);
  overflow: hidden;
  animation: riseUp 0.45s cubic-bezier(0.22,1,0.36,1) 0.4s both;
}

@keyframes riseUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

body.chat-page .chat-widget-card::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #E05555);
}

body.chat-page .chat-widget-inner {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

body.chat-page .widget-text-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.chat-page .chat-widget-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.chat-page .chat-widget-icon-badge {
  width: 30px; height: 30px;
  background: linear-gradient(135deg, var(--brand-mid), var(--brand-dark));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(54,54,148,0.45);
}

body.chat-page .chat-widget-icon-badge svg {
  width: 15px; height: 15px;
  fill: var(--white);
}

body.chat-page .chat-widget-title {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.25;
  letter-spacing: 0.1px;
}

body.chat-page .chat-widget-body {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
}

body.chat-page .inline-help-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  background: var(--accent);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  color: var(--white);
  vertical-align: middle;
  position: relative;
  top: -1px;
  margin: 0 2px;
  box-shadow: 0 1px 4px rgba(240,114,114,0.50);
}
body.chat-page {
    --help-btn-offset: 8px; /* ← change this number to move it down (or negative to move up) */
}
body.chat-page .widget-btn-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-left: 14px;
    border-left: 1px solid rgba(255,255,255,0.14);
    align-self: flex-end;
    transform: translateY(var(--help-btn-offset));
}

/* Primary — Start Chat (widget button variant, used only on Chat_Page) */
body.chat-page .btn-start-chat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 16px;
  background: linear-gradient(135deg, var(--brand-mid) 0%, var(--brand-dark) 100%);
  border: none;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(54,54,148,0.50);
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
  letter-spacing: 0.2px;
}

body.chat-page .btn-start-chat svg {
  width: 14px; height: 14px;
  fill: var(--white);
  flex-shrink: 0;
}

body.chat-page .btn-start-chat:hover {
  opacity: 0.90;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(54,54,148,0.65);
}

body.chat-page .btn-start-chat:active {
  transform: translateY(0);
  opacity: 1;
}

/* Secondary — Help button */
body.chat-page .btn-help {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 14px;
  background: rgba(240,114,114,0.65);
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(240,114,114,0.40);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

body.chat-page .btn-help-q {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}

body.chat-page .btn-help-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.90);
  line-height: 1;
}

body.chat-page .btn-help:hover {
  background: rgba(240,114,114,0.85);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(240,114,114,0.55);
}

/* Responsive — chat page */
@media (max-width: 820px) {
  body.chat-page .page-main    { grid-template-columns: 1fr; justify-items: center; }
  body.chat-page .main-content { grid-column: 1; order: 1; width: min(480px, 88vw); }
  body.chat-page .info-card    { grid-column: 1; order: 2; justify-self: center; width: min(480px, 88vw); }
}

@media (max-width: 600px) {
  body.chat-page .chat-widget-card {
    left: 10px;
    right: 10px;
    bottom: var(--genesys-bubble-clearance);
    width: auto;
    border-radius: 16px;
  }

  body.chat-page .chat-widget-inner {
    flex-direction: column;
    align-items: stretch;
  }

  body.chat-page .widget-btn-col {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.14);
    padding-left: 0;
    padding-top: 12px;
    flex-direction: row;
  }

  body.chat-page .btn-start-chat,
  body.chat-page .btn-help { flex: 1; }
}


/* ══════════════════════════════════════════════════════════
   9b. LOGIN PAGE  (Non_SSO_Login_Page.html) — body class: login-page
   ══════════════════════════════════════════════════════════ */

body.login-page .form-card {
  grid-column: 2;
  width: min(440px, 88vw);
  background: rgba(255,255,255,0.13);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--radius-card);
  box-shadow:
    0 24px 64px rgba(20,20,80,0.38),
    0  4px 16px rgba(20,20,80,0.22),
    inset 0 1px 0 rgba(255,255,255,0.18);
  overflow: hidden;
  position: relative;
  animation: riseUp 0.45s cubic-bezier(0.22,1,0.36,1) 0.25s both;
}

body.login-page .form-card::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-mid), var(--accent));
}

body.login-page .form-card-inner {
  padding: clamp(26px,4vw,42px) clamp(22px,3.5vw,38px) clamp(26px,4vw,42px);
}

/* Large centred heading variant of .card-eyebrow, used only on this page */
body.login-page .card-eyebrow {
  font-size: clamp(20px, 2.8vw, 26px);
  font-weight: 700;
  color: var(--white);
  text-align: center;
  margin-bottom: 14px;
  line-height: 1.25;
}

body.login-page .card-subtitle {
  font-size: 13.5px;
  color: rgba(255,255,255,0.72);
  margin-bottom: 28px;
  line-height: 1.55;
}

body.login-page .field-instruction {
  font-size: 13px;
  color: rgba(255,255,255,0.80);
  font-weight: 500;
  margin-bottom: 10px;
}

body.login-page .email-input {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--white);
  background: rgba(255,255,255,0.10);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

body.login-page .email-input::placeholder {
  color: rgba(255,255,255,0.38);
}

body.login-page .email-input:focus {
  border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.14);
  box-shadow: 0 0 0 3px rgba(161,161,240,0.22);
}

body.login-page .email-input.input-error {
  border-color: var(--error-colour);
  box-shadow: 0 0 0 3px rgba(248,113,113,0.18);
}

body.login-page .field-error {
  display: none;
  font-size: 12px;
  color: var(--error-colour);
  font-weight: 500;
  margin-top: 6px;
}
body.login-page .field-error.visible { display: block; }

/* Full-width form variant of .btn-start-chat, used only on this page */
body.login-page .btn-start-chat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 20px;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--brand-mid) 0%, var(--brand-dark) 100%);
  border: none;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(54,54,148,0.55);
  letter-spacing: 0.3px;
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
}

body.login-page .btn-start-chat svg {
  width: 16px; height: 16px;
  fill: var(--white);
  flex-shrink: 0;
}

body.login-page .btn-start-chat:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(54,54,148,0.70);
}

body.login-page .btn-start-chat:active {
  opacity: 1;
  transform: translateY(0);
}

body.login-page .card-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.14);
  margin: 24px 0 20px;
}

body.login-page .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.60);
  text-decoration: none;
  transition: color 0.2s;
}

body.login-page .back-link:hover { color: rgba(255,255,255,0.95); }

body.login-page .back-link svg {
  width: 14px; height: 14px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

body.login-page .access-note {
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-left: 3px solid var(--brand-pale);
  border-radius: 10px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.72);
  line-height: 1.6;
}

body.login-page .access-note strong {
  display: block;
  color: rgba(255,255,255,0.92);
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 13px;
}

body.login-page .access-note ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

body.login-page .access-note ul li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

body.login-page .access-note ul li::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand-pale);
  flex-shrink: 0;
  margin-top: 7px;
}

/* Responsive — login page */
@media (max-width: 820px) {
  body.login-page .page-main {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  body.login-page .form-card { grid-column: 1; order: 1; }
  body.login-page .info-card { grid-column: 1; order: 2; justify-self: center; width: min(440px, 88vw); }
}


/* ══════════════════════════════════════════════════════════
   9c. LANDING PAGE  (Altera_IT_Chat_Landing_Page.html) — body class: landing-page
   ══════════════════════════════════════════════════════════ */

body.landing-page .login-card {
  grid-column: 2;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--glass-border-hi);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(28px,4vw,48px) clamp(20px,3.5vw,44px) clamp(24px,3.5vw,44px);
  width: min(440px, 88vw);
  position: relative;
  overflow: hidden;
  color: var(--white);
}

body.landing-page .login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-mid), var(--accent));
}

body.landing-page .login-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.08) 0%, transparent 65%);
  pointer-events: none;
}

/* Small uppercase eyebrow-label variant of .card-eyebrow, used only on this page */
body.landing-page .card-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 14px;
  position: relative; z-index: 1;
}

body.landing-page .card-title {
  font-size: clamp(18px,2.5vw,22px);
  font-weight: 700;
  color: var(--on-glass-heading);
  margin-bottom: 6px;
  line-height: 1.3;
  position: relative; z-index: 1;
}

body.landing-page .card-subtitle {
  font-size: 13.5px;
  color: var(--on-glass-body);
  margin-bottom: 32px;
  position: relative; z-index: 1;
}

body.landing-page .it-notice {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(100, 110, 230, 0.18);
  border: 1px solid rgba(160, 165, 240, 0.35);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 22px;
}

body.landing-page .it-notice--alert {
  background: rgba(220, 160, 40, 0.18);
  border-color: rgba(240, 190, 80, 0.40);
}

body.landing-page .notice-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(160, 165, 240, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  margin-top: 1px;
}

body.landing-page .it-notice--alert .notice-icon {
  background: rgba(240, 190, 80, 0.22);
}

body.landing-page .notice-body { display: flex; flex-direction: column; gap: 3px; }

body.landing-page .notice-title {
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.3;
}

body.landing-page .notice-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.55;
}

body.landing-page .login-option {
  border: 1.5px solid rgba(255,255,255,0.20);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 14px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s, background 0.2s;
  display: block;
  color: inherit;
  text-decoration: none;
  background: rgba(255,255,255,0.06);
  position: relative; z-index: 1;
}
body.landing-page .login-option:hover {
  border-color: rgba(255,255,255,0.42);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  transform: translateY(-1px);
}

body.landing-page .login-option-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--on-glass-muted);
  margin-bottom: 10px;
  text-align: center;
}

body.landing-page .btn-microsoft,
body.landing-page .btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 14px 20px;
  background: rgba(255,255,255,0.95);
  border: none;
  border-radius: var(--radius-btn);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--brand-dark);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0,0,0,0.22), 0 1px 4px rgba(0,0,0,0.12);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
body.landing-page .btn-microsoft:hover,
body.landing-page .btn-primary:hover {
  background: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.14);
}

body.landing-page .ms-logo rect { fill: var(--brand-dark); }
body.landing-page .ms-logo { flex-shrink: 0; }

/* Image-only variant, used when the anchor wraps a pre-styled brand asset
   (e.g. Microsoft's official sign-in graphic) rather than custom SVG + text,
   so the real asset isn't double-boxed inside a second white background. */
body.landing-page .btn-microsoft-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
body.landing-page .btn-microsoft-img img {
  max-width: 100%;
  height: auto;
  display: block;
}
body.landing-page .btn-microsoft-img:hover img {
  opacity: 0.92;
}

body.landing-page .btn-description {
  font-size: 11.5px;
  color: var(--on-glass-muted);
  margin-top: 10px;
  text-align: center;
  line-height: 1.5;
  position: relative; z-index: 1;
}

body.landing-page .option-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 18px;
  position: relative; z-index: 1;
}
body.landing-page .option-divider hr {
  flex: 1;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.18);
}
body.landing-page .option-divider span {
  font-size: 12px;
  font-weight: 500;
  color: var(--on-glass-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Responsive — landing page */
@media (max-width: 820px) {
  body.landing-page .page-main { grid-template-columns: 1fr; justify-items: center; }
  body.landing-page .login-card { grid-column: 1; order: 1; }
  body.landing-page .info-card  { grid-column: 1; order: 2; justify-self: center; width: min(440px, 88vw); }
}