@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/inter-latin-400-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/inter-latin-400-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/playfair-display-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/playfair-display-latin-700-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/poppins-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Conelio Brand Design System */
:root{
  --color-navy:  #16202E;
  --color-teal:  #00BFA6;
  --color-mist:  #E8F7F5;
  --color-warm:  #F7F6F2;
  --color-steel: #4A6F96;
  --color-slate: #8A9CB0;
  --color-white: #FFFFFF;

  --font-display: "Playfair Display", Georgia, serif;
  --font-logo: "Poppins", "Inter", sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Compatibility aliases for existing styles */
  --color-ink: var(--color-navy);
  --color-navy-mid: var(--color-steel);
  --color-blue: var(--color-teal);
  --color-amber: var(--color-teal);
  --color-amber-dark: color-mix(in srgb, var(--color-teal) 82%, var(--color-navy));
  --color-amber-light: var(--color-mist);
  --color-amber-border: rgba(0,191,166,0.22);
  --color-cream: var(--color-warm);
  --color-cream-border: rgba(22,32,46,0.09);
  --color-muted: var(--color-slate);
  --color-muted-dark: var(--color-steel);

  /* Semantic mappings */
  --bg:           var(--color-warm);
  --surface:      var(--color-white);
  --text:         var(--color-navy);
  --text-muted:   var(--color-steel);
  --text-subtle:  var(--color-slate);
  --border:       rgba(22,32,46,0.09);
  --border-strong:rgba(22,32,46,0.13);
  --border-dark:  rgba(255,255,255,0.07);
  --accent:       var(--color-teal);
  --accent-hover: color-mix(in srgb, var(--color-teal) 84%, var(--color-navy));
  --focus:        rgba(0,191,166,0.18);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --bar-bg: var(--color-navy);
  --page-bg: var(--bg);
  --card-bg: var(--surface);
  --muted: var(--text-muted);
  --muted-2: var(--text-subtle);
  --primary: var(--color-teal);
  --primary-600: var(--color-teal);
  --primary-light: var(--color-mist);
  --accent-green: var(--color-teal);
  --action:       var(--color-teal);
  --action-hover: color-mix(in srgb, var(--color-teal) 84%, var(--color-navy));
  --action-ring:  rgba(0,191,166,0.18);
  --shadow-soft:  0 14px 36px rgba(22,32,46,0.08);
  --shadow-medium:0 18px 36px rgba(22,32,46,0.12);
  --shadow-strong:0 22px 44px rgba(22,32,46,0.16);
}

/* Reset and base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  font-family:var(--font-ui);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.65;
  font-size:16px;
}

button, input, textarea, select{
  font-family:var(--font-ui);
}

/* App shell — centered container */
.app-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding:0 var(--space-4) var(--space-6);
  overflow:visible;
}

.app-header{
  width:100%;
  max-width:1200px;
  border-radius:var(--radius-md);
  background: transparent;
  color: var(--text);
  padding:var(--space-3) var(--space-4);
  border-bottom:none;
  margin-bottom:var(--space-2);
}

.app-header-inner{
  display:flex;
  align-items:center;
  gap:18px;
  justify-content:space-between;
  flex-wrap:wrap;
}

.header-actions{ margin-left:auto; }
.header-home{
  display:inline-block;
  padding:8px 14px;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
  border:1px solid var(--border);
  transition: background-color 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease;
}
.header-home:hover, .header-home:focus{
  background:var(--border);
}

.app-title h1{ font-size:1.15rem; margin:0; font-weight:600; letter-spacing:0.01em }
.app-title .subtitle{ display:none }

/* Main layout */
.app-main{
  width:100%;
  max-width:1200px;
  display:grid;
  grid-template-columns: 1fr; /* single column for chat page */
  gap:0;
  margin-top:0;
  text-align:center;
}

.app-layout{
  width:100vw;
  max-width:none;
  margin:0;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  display:flex;
  gap:24px;
  align-items:flex-start;
  padding:0 var(--space-4);
  padding-left:0;
  min-height:100vh;
  height:auto;
}

.app-sidebar{
  width:220px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:16px;
  position:sticky;
  top:0;
  margin-left:var(--space-4);
  display:flex;
  flex-direction:column;
  gap:10px;
  align-self:stretch;
  min-height:100vh;
  height:auto;
}

.side-brand{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:6px 6px 10px 6px;
}

.side-brand .brand-logo{
  height:36px;
  max-width:100%;
  width:auto;
}

.side-bottom{
  margin-top:auto;
  padding-top:12px;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.side-bottom .side-link{
  margin:0;
}

.side-footer{
  padding-top:12px;
  border-top:1px solid var(--border);
}

.side-footer .lang-toggle{
  display:flex;
  justify-content:flex-start;
}

.side-footer .lang-toggle .lang-current{
  background:var(--color-white) !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
  box-shadow:none !important;
}

.side-footer .lang-toggle .lang-current:hover{
  background:var(--color-warm) !important;
}

.side-footer .lang-toggle .lang-options{
  left:0;
  right:auto;
  background:var(--color-white);
}

.side-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.side-icon{
  width:18px;
  height:18px;
  flex:0 0 auto;
}

.side-link span{
  display:inline-block;
}

.side-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  text-decoration:none;
  color:var(--text);
  font-weight:600;
}

.side-link:hover{
  background:rgba(22,32,46,0.04);
}

.side-link.active{
  background:rgba(0,191,166,0.12);
  color:var(--text);
}

.side-subnav{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:0 0 2px 30px;
}

/* Pull children much closer to their parent while keeping row spacing readable */
.side-link + .side-subnav{
  margin-top:-6px;
}

.side-sublink{
  display:block;
  text-decoration:none;
  color:var(--text-muted);
  font-weight:600;
  font-size:0.9rem;
  line-height:1.25;
  border-radius:8px;
  padding:6px 10px;
}

.side-sublink:hover{
  background:rgba(22,32,46,0.04);
  color:var(--text);
}

.side-sublink.active{
  background:rgba(0,191,166,0.12);
  color:var(--text);
}

.side-link.danger{
  color:var(--color-navy);
}
.side-link.danger:hover{
  background:rgba(22,32,46,0.08);
}
.side-link.danger .side-icon{
  color:inherit;
}

.app-layout .scenario-band.plain{
  width:auto;
  margin:0;
  background:transparent;
  color:inherit;
  padding:var(--space-6) 0 0 0;
  min-height:auto;
}

.scenario-band.plain h1{
  color:var(--text);
}

.scenario-band.plain .scenario-inner{
  margin:0 auto;
  padding-left:var(--space-4);
  padding-right:var(--space-4);
  box-sizing:border-box;
  text-align:left;
  color:var(--text);
}

.section-title-left{
  text-align:left;
}

.user-page-title{
  text-align:left;
  font-size:32px;
  line-height:1.2;
  font-weight:600;
  margin:0 0 16px 0;
}

.scenario-band.plain .user-page-title{
  font-size:32px;
  line-height:1.2;
  font-weight:600;
  margin:0 0 16px 0;
  color:var(--text);
}

.scenario-band{
  width:100%;
  margin-left:0;
  margin-right:0;
  border-radius:var(--radius-md);
}

.app-layout .history-panel.full-bleed,
.app-layout .saved-panel.full-bleed{
  width:100%;
  margin-left:0;
  margin-right:0;
}

.app-main.dashboard-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:24px;
  text-align:left;
  height:100vh;
  overflow-y:auto;
  padding-right:6px;
  padding-top:0;
}

.settings-panel{
  background:transparent;
  border:none;
  border-radius:0;
  padding:var(--space-6) var(--space-4) 0 var(--space-4);
  box-sizing:border-box;
  text-align:left;
  width:100%;
  max-width:none;
}

.settings-email{
  font-size:0.95rem;
  color:var(--text-muted);
  margin:4px 0 var(--space-4) 0;
}

.settings-panel h1{
  margin:0 0 16px 0;
  font-size:32px;
  line-height:1.2;
  font-weight:600;
}

.settings-section{
  max-width:760px;
  margin-top:26px;
}

.settings-section:first-of-type{
  margin-top:0;
}

.settings-section-title{
  margin:0 0 12px 0;
  font-size:1.15rem;
  line-height:1.25;
  font-weight:700;
  color:var(--text);
}

.settings-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:16px;
}
.settings-field input{
  max-width:320px;
}


.settings-actions{
  display:flex;
  justify-content:flex-start;
  margin-top:8px;
}

.settings-actions .scenario-cta{
  height:40px;
  padding:0 16px;
  width:160px;
}

.danger-zone{
  margin-top:28px;
  padding:16px;
  border:1px solid rgba(22,32,46,0.16);
  background:rgba(22,32,46,0.04);
  border-radius:12px;
}

.settings-section .danger-zone{
  margin-top:12px;
}
.danger-title{
  margin:0 0 8px 0;
  font-size:1.05rem;
  font-weight:700;
  color:var(--text);
}
.danger-text{
  margin:0 0 12px 0;
  color:var(--text-muted);
  font-size:0.95rem;
  line-height:1.5;
}
.danger-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.danger-confirm{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:0.95rem;
  color:var(--text);
}
.danger-confirm input{
  margin-top:2px;
}
.danger-form .secondary-button.danger{
  width:fit-content;
}
.danger-form .secondary-button.danger:disabled{
  opacity:0.6;
  cursor:not-allowed;
}

.settings-message{
  padding:10px 12px;
  border-radius:10px;
  font-size:0.95rem;
  margin-bottom:12px;
}

.settings-message.error{
  background:rgba(22,32,46,0.06);
  color:var(--color-navy);
  border:1px solid rgba(22,32,46,0.14);
}

.settings-message.success{
  background:rgba(0,191,166,0.12);
  color:var(--color-teal);
  border:1px solid rgba(0,191,166,0.2);
}

@media (max-width: 900px){
  .app-layout{
    flex-direction:column;
    height:auto;
  }
  .app-sidebar{
    width:100%;
    position:static;
    margin-left:0;
    min-height:auto;
    height:auto;
  }
  .app-main.dashboard-main{
    height:auto;
    overflow:visible;
    padding-right:0;
  }
  .side-brand{
    justify-content:center;
  }
  .side-nav{
    flex-direction:column;
  }
  .side-link{
    justify-content:flex-start;
  }
  .side-subnav{
    padding-left:34px;
  }
}

/* Panels */
.config-panel, .chat-panel, .feedback-panel, .landing-panel {
  background:var(--surface);
  border-radius:var(--radius-md);
  padding:var(--space-5);
  box-shadow: 0 1px 0 rgba(22,32,46,0.04);
  border: 1px solid var(--border);
  text-align:left;
}
.config-panel label{ text-align:left; }
.config-panel{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
}
.chat-panel{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.feedback-panel{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
}

.panel-head{ margin-bottom:var(--space-3) }
.panel-title{ margin:0; font-size:1.08rem; color:var(--text); font-weight:600 }
.panel-sub{ margin:6px 0 0 0; font-size:0.95rem; color:var(--text-muted) }

/* Form controls */
.label{ display:block; margin-bottom:12px }
.label-title{ font-size:0.9rem; color:var(--muted-2); margin-bottom:6px }
.config-form label, .config-form .two-column label{
  display:block;
  width:100%;
  margin-bottom:4px;
}
.input-text, .input-textarea, input[type="text"], input[type="email"], input[type="password"], textarea{
  width:100%;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);
  background: var(--surface);
  color:var(--text);
  font-size:0.95rem;
  font-family: inherit;
}
.input-textarea{ min-height:80px; resize:vertical }
input[type="file"]{ margin-top:8px }

.input-text:focus, .input-textarea:focus, textarea:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-color:var(--accent);
  box-shadow:none;
}

.two-column{ display:grid; grid-template-columns:1fr 1fr; gap:12px }

.config-help{ font-size:0.9rem; color:var(--muted); margin-bottom:12px }
.save-scenario{
  margin-top:12px;
  padding:0;
  border-radius:0;
  border:none;
  background:transparent;
  box-shadow:none;
}
.config-panel .save-scenario{
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  box-shadow:none !important;
}
.checkbox-row{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:0.95rem;
  color:var(--muted);
  margin-top:6px;
}
.form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.questions-panel{
  margin-top:18px;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(22,32,46,0.08);
}
.questions-panel h3{
  margin:0 0 10px 0;
  font-size:1rem;
  color:var(--text);
}
.questions-list{
  margin:0;
  padding-left:20px;
  color:var(--muted-2);
  line-height:1.6;
}
.questions-list li{ margin-bottom:8px; }

.questions-loading{
  margin-top:16px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(22,32,46,0.08);
  color:var(--text);
  width:fit-content;
}
.spinner{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid rgba(22,32,46,0.2);
  border-top-color:var(--text);
  animation:spin 0.9s linear infinite;
}
.loading-text{ font-size:0.95rem; }

@keyframes spin{
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.config-help.left-align{ text-align:left; }

/* Chat window */
.chat-window{
  background:var(--color-navy);
  border-radius:10px;
  padding:14px;
  border:1px solid var(--border);
  height:430px;
  overflow-y:auto;
}

.message{ display:flex; flex-direction:column; margin-bottom:12px }
.message .meta{ font-size:0.75rem; color:var(--muted); margin-bottom:6px }

.message.assistant{ align-items:flex-start }
.message.user{ align-items:flex-end }

.bubble{
  max-width:88%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--color-navy);
  color:var(--text);
  box-shadow: 0 6px 18px rgba(22,32,46,0.16);
}

.message.user .bubble{ background:var(--primary); color:white; border-color:var(--primary-600) }

.content{ margin:0; white-space:pre-wrap; font-size:0.98rem; line-height:1.6 }

/* Composer */
.composer{ margin-top:8px }
.composer-actions{ display:flex; gap:10px; align-items:center; margin-top:8px }
.inline-form{ display:inline-block }
.full-width-action{ width:100%; }
.full-width-action .secondary-button,
.full-width-action .primary-button{
  width:100%;
  text-align:center;
  justify-content:center;
}

.panel-head-inline{ display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; }
.panel-title-row{ display:flex; align-items:center; gap:10px; }
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:var(--radius-sm);
  font-size:0.9rem;
  font-weight:600;
  border:1px solid var(--border);
  color:var(--text);
  background:var(--surface);
}
.status-dot{ font-size:0.9rem; line-height:1; color:var(--accent); }
.status-ready{ background:var(--surface); color:var(--text); }
.status-listening{ background:var(--surface); color:var(--text); border-color:var(--border-strong); }
.status-thinking{ background:var(--surface); color:var(--text); border-color:var(--border-strong); }
.status-speaking{ background:var(--surface); color:var(--text); border-color:var(--border-strong); }

.voice-input{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:14px 12px;
}
.status-capsule{
  display:none;
  
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:0.95rem;
  border:1px solid transparent;
  background:var(--color-navy);
  color:var(--text);
  box-shadow:0 8px 20px rgba(22,32,46,0.14);
}
.status-capsule.status-ready{ background:rgba(22,32,46,0.08); color:var(--color-navy); }
.status-capsule.status-listening{ background:var(--color-mist); color:var(--color-navy); border-color:var(--color-teal); }
.status-capsule.status-thinking{ background:var(--color-mist); color:var(--color-steel); border-color:rgba(0,191,166,0.28); }
.status-capsule.status-speaking{ background:var(--color-mist); color:var(--color-teal); border-color:var(--color-teal); }

.mic-center{
  display:flex;
  justify-content:center;
  width:100%;
  margin-top:6px;
  margin-bottom:6px;
}
.mic-button{
  width:140px;
  height:140px;
  border-radius:50%;
  border:1px solid var(--border);
  appearance:none;
  position:relative;
  background: var(--surface);
  color:var(--text);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:none;
  cursor:pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.mic-button:hover{ transform: translateY(-1px); border-color:var(--border-strong); }
.mic-button .mic-icon{ font-size:1.9rem; color:var(--accent); }
.mic-button.hidden{ display:none; }
.auto-listen-note{
  color:var(--text-muted);
  font-size:0.8rem;
  text-align:center;
}
.mic-button .mic-label{ font-weight:700; letter-spacing:0.01em; font-size:1rem; color:var(--text-muted); }
.mic-button.listening{
  box-shadow:none;
  background: var(--surface);
  transform: translateY(-1px);
}
@keyframes pulse-ring{
  0%{ opacity:0.7; transform: scale(0.95); }
  70%{ opacity:0; transform: scale(1.1); }
  100%{ opacity:0; transform: scale(1.1); }
}

.transcript-box{
  width:100%;
  max-width:420px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  color:var(--text);
  box-shadow:none;
  margin-top:6px;
}
.transcript-box.is-empty{
  display:none;
}
.transcript-box.small{ padding:8px 10px; }
.transcript-line{ font-size:0.95rem; color:var(--text); }
.transcript-line .muted{ color:var(--muted-2); }
.transcript-text{ font-weight:600; color:var(--text); }

.state-indicator{ color:var(--muted-2); font-size:0.9rem; }
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Buttons */
/* Ensure button text uses the base font */
button, .primary-button, .secondary-button, .ghost-button, .scenario-cta.btn-primary{
  font-family: inherit;
}

.scenario-cta.btn-primary:hover{
  background:var(--action-hover) !important;
}

.scenario-cta{
  font-family: inherit;
}

.primary-button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  background:var(--accent);
  color:white;
  padding:10px 16px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  font-weight:700;
  cursor:pointer;
  box-shadow:none;
}
.primary-button:hover{ background:var(--accent-hover); transform:none; }
.primary-button:focus{ outline:3px solid var(--focus); outline-offset:2px; }

.secondary-button,
.ghost-button{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  background:transparent;
  color:var(--accent);
  border:none;
  padding:9px 14px;
  border-radius:var(--radius-sm);
  font-weight:600;
  cursor:pointer;
}
.secondary-button:hover,
.ghost-button:hover{
  text-decoration:underline;
}
.secondary-button:focus,
.ghost-button:focus{
  outline:3px solid var(--focus);
  outline-offset:2px;
}

/* Feedback card */
.feedback-card{ margin-top:var(--space-3); padding:var(--space-3); border-radius:var(--radius-md); background:var(--surface); color:var(--text); border:1px solid var(--border); box-shadow:none; }
.feedback-card h3{ margin:0 0 var(--space-2) 0; font-size:1rem; font-weight:600; }
.feedback-text{ white-space:pre-wrap; font-family:inherit; font-size:0.95rem; line-height:1.6; color:var(--text); background:var(--surface); padding:var(--space-3); border-radius:var(--radius-sm); border:1px solid var(--border); }
.feedback-actions{ margin-top:var(--space-3); display:flex; gap:var(--space-2); }

/* Feedback layout improvements */
.feedback-grid{ display:grid; grid-template-columns: 320px 1fr; gap:var(--space-3); align-items:start }
.feedback-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-3);
  align-items:stretch;
}
.feedback-split > .transcript-panel,
.feedback-split > .feedback-detail{
  min-height:0;
}
.feedback-summary{ background:var(--surface); border-radius:var(--radius-md); padding:var(--space-3); border:1px solid var(--border); box-shadow:none; }
.feedback-summary h3{ margin-top:0 }
.summary-text{ color:var(--text-muted); line-height:1.55 }
.summary-meta{ margin-top:var(--space-3) }
.feedback-detail h3{ margin-top:0; font-weight:600; }
.feedback-rich p{ margin:0 0 var(--space-2) 0; color:var(--text-muted); line-height:1.6 }
.raw-feedback summary{ font-weight:600 }

/* When feedback-grid holds a single feedback column, use full width and center content */
.feedback-grid.single-feedback{ grid-template-columns: 1fr; max-width:960px; margin:0 auto; }
.feedback-grid.single-feedback .feedback-detail.full-width{ padding:var(--space-3); }

.feedback-section{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--space-3);
  margin-bottom:var(--space-2);
  box-shadow:none;
}
.feedback-section h3{ margin:0 0 var(--space-2) 0; font-size:1rem; color:var(--text); font-weight:600; }
.section-head{ display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px; }
.section-body{ color:var(--text-muted); line-height:1.6; }
/* feedback-scroll intentionally unused now to allow full-length view */
.feedback-scroll{ max-height:none; overflow:visible; padding-right:0; }

.transcript-panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--space-3);
  box-shadow:none;
  min-height:420px;
  height:100%;
  display:flex;
  flex-direction:column;
  align-self:stretch;
}
.transcript-scroll{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow-y:auto;
  padding-right:6px;
}
.transcript-row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  margin-bottom:var(--space-2);
}
.transcript-row.user{
  align-items:flex-end;
}
.transcript-speaker{
  max-width:82%;
  font-size:0.82rem;
  color:var(--color-steel);
  margin-bottom:4px;
  font-weight:700;
}
.transcript-row.user .transcript-speaker{
  color:var(--color-amber-dark);
  text-align:right;
}
.transcript-row.assistant .transcript-speaker{
  color:var(--color-steel);
}
.transcript-bubble{
  max-width:82%;
  background:var(--color-white);
  border:1px solid var(--border);
  border-radius:12px 12px 12px 4px;
  padding:10px 12px;
  line-height:1.55;
  color:var(--color-navy);
}
.transcript-row.user .transcript-bubble{
  background:var(--color-teal);
  color:var(--color-navy);
  border-color:transparent;
  border-radius:12px 12px 4px 12px;
}
.transcript-empty{
  color:var(--text-muted);
  padding:var(--space-2);
  background:var(--surface);
  border:1px dashed var(--border);
  border-radius:var(--radius-sm);
}

.score-badge{
  background:transparent;
  color:var(--accent);
  padding:8px 14px;
  border-radius:var(--radius-sm);
  font-weight:700;
  border:1px solid var(--border);
  min-width:82px;
  text-align:center;
}

.bullet-list{
  list-style: disc;
  padding-left:18px;
  margin:0 0 4px 0;
  color:var(--text-muted);
  line-height:1.5;
}
.bullet-list li{ margin-bottom:6px }
.bullet-list.muted{ color:var(--text-muted) }
.bullet-list li.empty{ color:var(--text-muted); list-style:none }

.markdownish p{ margin:0 0 10px 0; }
.markdownish p:last-child{ margin-bottom:0 }

.feedback-warning{
  margin-top:8px;
  color:var(--text);
  background:rgba(22,32,46,0.08);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:8px 12px;
  font-size:0.9rem;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.feedback-warning.info{
  background:rgba(22,32,46,0.05);
  border-color:var(--border);
  color:var(--text);
}
.feedback-icon{ font-size:1rem; }

.conversation-ended{
  margin-bottom:12px;
  color:var(--text);
  background:rgba(22,32,46,0.08);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  font-size:0.95rem;
}

.composer{ margin-top:2px; }
.full-width-action{ margin-top:var(--space-4) !important; }

/* Responsive tweaks */
@media (max-width:900px){
  .app-shell{ padding:20px 14px; }
  .feedback-grid{ grid-template-columns: 1fr; }
  .app-main{ gap:14px; }
  .config-panel, .chat-panel, .feedback-panel, .landing-panel{ padding:16px; }
  .marketing-header{ flex-direction:row; align-items:center; justify-content:space-between;
  flex-wrap:wrap; }
  .header-cta{ width:auto; margin-left:auto; }
  .header-cta .primary-button{ width:auto; text-align:center; }
  .dashboard-grid{ grid-template-columns:1fr; }
  .scenario-card{ padding:16px; }
  .scenario-actions{ display:flex; flex-direction:column; gap:10px; }
  .scenario-cta, .scenario-cta.ghost{ width:100%; text-align:center; }
  .chat-panel #chat-window{ height: clamp(140px, 20vh, 190px); }
  .voice-input{ padding:12px 10px; }
  .mic-button{ width:130px; height:130px; }
  .transcript-box{ max-width:100%; }
  .full-width-action{ margin-top:16px !important; }
  .primary-button, .secondary-button{ width:100%; text-align:center; justify-content:center; }
  .feedback-split{ grid-template-columns:1fr; }
  .feedback-scroll, .transcript-scroll{ max-height:none; }
}

@media (max-width:600px){
  .app-shell{ padding:16px 12px; }
  .marketing-header{ gap:10px; }
  .brand-mark{ width:auto; }
  .panel-head{ margin-bottom:10px; }
  .panel-title{ font-size:1rem; }
  .guide-section.plain{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
}

.guide-section, .landing-panel{ padding:16px; }
  .config-form label, .config-form .two-column label{ width:100%; display:block; }
  .two-column{ grid-template-columns:1fr; gap:10px; }
  .mic-button{ width:120px; height:120px; }
  .status-capsule{ width:100%; justify-content:center; }
  .chat-panel #chat-window{ height: clamp(120px, 18vh, 170px); }
  .feedback-section{ padding:12px; }
  .score-badge{ font-size:0.9rem; padding:7px 12px; }
}

/* Landing and dashboard styles (preserve previous classes) */
.landing-panel{
  max-width:960px;
  margin:0 auto;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px;
  box-shadow:0 14px 36px rgba(22,32,46,0.14);
  color:var(--text);
}
.landing-panel h1, .landing-panel h2, .landing-panel h3, .landing-panel h4{ color:var(--text) }
.landing-panel .intro-text{ color:var(--muted); }

.demo-panel{
  max-width:1100px;
}
.demo-page-title{
  max-width:1100px;
  width:100%;
  margin:0 auto 16px;
  font-family:var(--font-display);
  font-size:48px;
  line-height:1.18;
  font-weight:700;
  color:var(--text);
  text-align:center;
}
.demo-panel{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
}
.demo-layout{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:var(--space-5);
  align-items:start;
}
.demo-benefit-grid{
  margin-top:18px;
}
.benefit-item{
  display:flex;
  gap:12px;
  align-items:center;
}
.benefit-icon{
  width:22px;
  height:22px;
  color:var(--accent);
  flex-shrink:0;
  margin-top:2px;
}
.demo-form-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
}
.demo-form-card .primary-button,
.demo-form-card .demo-submit-button{
  width:auto;
  margin:0 auto;
  display:flex;
}
@media (max-width: 900px){
  .demo-layout{ grid-template-columns:1fr; }
}
.dashboard-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:16px }
.scenario-card{
  border-radius:12px;
  padding:18px;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:none;
  color:var(--text);
}
.scenario-card h4{ color:var(--text); margin:0 0 6px 0; }
.scenario-card .scenario-desc{ color:var(--text-muted); margin:0 0 10px 0; line-height:1.5; }
.scenario-emoji{ font-size:1.3rem; margin-right:8px }
.scenario-cta{
  display:inline-block;
  padding:8px 12px;
  border-radius:8px;
  text-decoration:none;
  color:white;
  background:var(--accent);
  border:1px solid transparent;
  font-weight:600;
  transition: background-color 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease;
  box-shadow:none;
}
.scenario-cta:hover, .scenario-cta:focus{
  background:var(--accent-hover);
  transform:none;
  box-shadow:none;
}

/* Keep ghost variant visually consistent (same base color) */
.scenario-cta.ghost{
  background:var(--primary);
  color:white;
  border-color:transparent;
  box-shadow: 0 6px 18px rgba(0,191,166,0.12);
  transition: background-color 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease;
}
.scenario-cta.ghost:hover, .scenario-cta.ghost:focus{
  background:var(--primary-light);
}

/* Coming-soon performance card styling */
.scenario-card.coming-soon{
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  border-color: rgba(255,255,255,0.08);
  opacity: 1;
  position: relative;
  padding-bottom: 44px; /* reserve space for centered badge */
}
.scenario-card.coming-soon .scenario-emoji{ opacity:0.75 }
.scenario-card.coming-soon .scenario-actions{ pointer-events:none; opacity:0.6 }
.scenario-card.coming-soon .scenario-desc{ color:var(--muted-2) }
.coming-badge{
  /* Centered badge at the bottom of the card */
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.08);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight:600;
  box-shadow: 0 6px 18px rgba(22,32,46,0.12);
}

/* Responsive */
@media (max-width:900px){
  .app-main{ padding:0 }
  .two-column{ grid-template-columns:1fr }
  .chat-window{ height:380px }
}

/* Accessibility helpers */
button:disabled{ opacity:0.6; cursor:not-allowed }

/* Small niceties */
.panel-sub small{ color:var(--muted) }

/* End of stylesheet */

/* Marketing landing */
.marketing-body{
  background:var(--bg);
  color:var(--text);
}
html{ scroll-behavior:smooth; }
.marketing-shell{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px 24px;
}
.marketing-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding:10px 20px;
  min-height:72px;
  background:var(--bar-bg);
  border-bottom:none;
  border-radius:0;
  box-shadow:none;
  margin-top:0;
  margin-bottom:0;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:auto;
  max-width:none;
  box-sizing:border-box;
  flex-wrap:nowrap;
}
.marketing-main{ margin-top:0; padding-top:0; }
.brand-mark{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
  flex-shrink:0;
}
.brand-logo{
  height:30px;
  max-width:100%;
  width:auto;
  display:block;
}
.brand-mark-disabled{
  pointer-events:none;
  cursor:default;
  opacity:0.85;
}
.brand-name{ font-weight:700; letter-spacing:0.01em; color:var(--text); font-size:2rem; text-transform:lowercase; }
.brand-tagline{ font-size:0.9rem; color:var(--text-muted) }
.marketing-header .primary-button.slim{
  padding:8px 14px;
  line-height:1.2;
  font-size:0.95rem;
}
.header-cta{
  margin-left:auto;
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.header-links{
  display:flex;
  align-items:center;
  gap:18px;
  margin-left:24px;
  flex:1;
  justify-content:center;
  font-weight:600;
}
.header-links a{
  color:var(--color-slate);
  text-decoration:none;
  opacity:1;
}
.header-links a:hover{
  color:#FFFFFF;
}
@media (max-width: 720px){
  .header-links{ display:none; }
}

.audience-section .section-head{
  margin-bottom:18px;
  text-align:center;
  flex-direction:column;
  align-items:center;
}
.audience-section h2{
  margin:0;
  font-size:1.75rem;
  font-weight:600;
}
.audience-section .section-sub{
  color:var(--text-muted);
  max-width:720px;
  margin:0 auto;
}
.audience-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:32px;
}
.audience-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:20px 16px;
  text-align:center;
  min-height:132px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.audience-card h3{
  margin:10px 0 0 0;
  font-size:1rem;
}
.audience-card p{
  margin:0;
  color:var(--text-muted);
  line-height:1.5;
}
.audience-icon{
  color:var(--text);
  opacity:0.7;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
}
.audience-icon svg{
  width:22px;
  height:22px;
}
.audience-cta{
  margin-top:14px;
}
.text-link{
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
}
.text-link:hover{
  text-decoration:underline;
}
@media (max-width: 1180px){
  .audience-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .audience-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px){
  .audience-grid{ grid-template-columns:1fr; }
}
.lang-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.lang-toggle .lang-current{
  padding:8px 10px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-weight:600;
  font-size:0.85rem;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.lang-icon{
  width:16px;
  height:16px;
}
.lang-caret{
  width:12px;
  height:12px;
}
.lang-label{
  line-height:1;
}
.lang-options{
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  min-width:72px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:0 1px 0 rgba(22,32,46,0.04);
  padding:6px;
  display:none;
  flex-direction:column;
  gap:6px;
  z-index:10;
}
.lang-options a{
  color:var(--text);
  text-decoration:none;
  padding:6px 10px;
  border-radius:var(--radius-sm);
  font-weight:700;
  font-size:0.85rem;
  text-align:center;
  background:var(--surface);
}
.lang-options a:hover{
  background:rgba(22,32,46,0.05);
}
.lang-toggle:hover .lang-options,
.lang-toggle:focus-within .lang-options,
.lang-toggle.open .lang-options{
  display:flex;
}
.header-cta > *{ flex-shrink:0; }
.header-cta a,
.header-cta button{
  min-width:0;
  flex-shrink:1;
}

.header-menu{
  position:relative;
  display:inline-block;
}
.header-menu summary{
  list-style:none;
  cursor:pointer;
}
.header-menu[open] summary::marker,
.header-menu summary::-webkit-details-marker{ display:none; }
.header-menu:hover .icon-button,
.header-menu:focus-within .icon-button{
  border-color:var(--border-strong);
}
.icon-button{
  padding:8px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-weight:700;
}
.icon-button:hover{ background:var(--surface); }
.header-menu-items{
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  min-width:160px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:0 1px 0 rgba(22,32,46,0.04);
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:10;
  display:none;
}
.header-menu:hover .header-menu-items,
.header-menu:focus-within .header-menu-items,
.header-menu.open .header-menu-items{
  display:flex;
}
.header-menu-items a{
  color:var(--text);
  text-decoration:none;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  background:var(--surface);
}
.header-menu-items a:hover{
  background:rgba(22,32,46,0.05);
}

.conversation-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:4px;
  flex-wrap:wrap;
  justify-content:center;
}


.chat-timer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-bottom:10px;
  font-weight:600;
  color:var(--text-muted);
}
.chat-timer .timer-value{
  color:var(--text);
  font-weight:700;
}


.chat-activity{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:10px;
}

.speaker-row{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:44px;
  width:100%;
}

.speaker-indicator{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-size:0.9rem;
  color:var(--text-muted);
}
.speaker-icon{
  width:132px;
  height:132px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--accent);
  position:relative;
  transform-origin:center;
  transition:transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.speaker-indicator.agent .speaker-icon{
  color:var(--accent-hover);
}
.speaker-icon svg{
  width:66px;
  height:66px;
}
.speaker-name{
  font-weight:600;
  color:var(--text);
}
.speaker-indicator.active .speaker-icon{
  animation:speakerBeat 1.2s ease-in-out infinite;
}
.speaker-icon::after{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:50%;
  border:2px solid currentColor;
  opacity:0;
  pointer-events:none;
}
.speaker-indicator.active .speaker-icon::after{
  opacity:1;
  animation:speakerRipple 1.35s ease-out infinite;
}
.mic-indicator.active .speaker-icon{
  color:var(--color-teal);
  background:var(--color-mist);
  border-color:rgba(0,191,166,0.28);
  box-shadow:0 0 0 6px rgba(0,191,166,0.12);
}
.agent-indicator.active .speaker-icon{
  color:var(--color-steel);
  background:rgba(74,111,150,0.1);
  border-color:rgba(74,111,150,0.28);
  box-shadow:0 0 0 6px rgba(74,111,150,0.12);
}
@keyframes speakerBeat{
  0%{ transform:scale(1); }
  35%{ transform:scale(1.05); }
  70%{ transform:scale(0.99); }
  100%{ transform:scale(1); }
}
@keyframes speakerRipple{
  0%{ transform:scale(0.95); opacity:0.55; }
  75%{ transform:scale(1.22); opacity:0; }
  100%{ transform:scale(1.22); opacity:0; }
}
.live-transcript{
  margin-top:12px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
  padding:12px;
}
.live-transcript.hidden{ display:none; }
.live-transcript-head{
  font-weight:700;
  margin-bottom:8px;
  color:var(--text);
}
.live-transcript-lines{
  max-height:140px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:0.9rem;
  color:var(--text);
}
.live-transcript-line{
  padding:6px 8px;
  border-radius:10px;
  background:var(--color-navy);
  border:1px solid var(--border);
}
.live-transcript-line.user{
  align-self:flex-end;
  background:var(--primary);
  color:var(--color-white);
}
.live-transcript-line.assistant{
  align-self:flex-start;
  color:var(--color-steel);
}
.live-transcript-empty{
  color:var(--text-muted);
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(0,191,166,0.24); }
  70%{ box-shadow:0 0 0 10px rgba(0,191,166,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,191,166,0); }
}

.metrics-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-bottom:12px;
}
.metric-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:12px 14px;
}
.metric-label{
  font-size:0.85rem;
  color:var(--text-muted);
  margin-bottom:6px;
}
.metric-value{
  font-size:1.08rem;
  font-weight:700;
  color:var(--text);
}
.metric-sub{
  font-size:0.8rem;
  color:var(--text-muted);
  margin-top:4px;
}
.metric-card-pace{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.pace-visual{
  margin-top:8px;
}
.pace-track{
  position:relative;
  height:10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(22,32,46,0.08);
  overflow:hidden;
}
.pace-target-band{
  position:absolute;
  top:0;
  bottom:0;
  left:20%;
  width:28%;
  background:rgba(0,191,166,0.24);
}
.pace-marker{
  position:absolute;
  top:50%;
  left:0;
  width:14px;
  height:14px;
  border-radius:999px;
  background:var(--color-navy);
  border:2px solid var(--color-white);
  box-shadow:0 0 0 1px rgba(22,32,46,0.2);
  transform:translate(-50%, -50%);
}
.pace-scale{
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.pace-range-target{
  font-size:0.78rem;
  color:var(--text-muted);
  font-weight:600;
}
.pace-status{
  font-size:0.76rem;
  font-weight:700;
  border-radius:999px;
  padding:3px 9px;
  border:1px solid transparent;
  white-space:nowrap;
}
.pace-status.is-in-range{
  color:var(--color-navy);
  background:rgba(0,191,166,0.12);
  border-color:rgba(0,191,166,0.3);
}
.pace-status.is-slow{
  color:var(--color-navy);
  background:rgba(0,191,166,0.12);
  border-color:rgba(22,32,46,0.16);
}
.pace-status.is-fast{
  color:var(--color-navy);
  background:rgba(22,32,46,0.08);
  border-color:rgba(22,32,46,0.16);
}
.pace-guidance{
  margin-top:6px;
  color:var(--text-muted);
  font-size:0.8rem;
  line-height:1.35;
}
@media (max-width: 720px){
  .metrics-grid{ grid-template-columns:1fr; }
  .pace-scale{
    flex-direction:column;
    align-items:flex-start;
  }
}

.saved-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.secondary-button.danger{
  color:var(--color-navy);
}
.secondary-button.danger:hover{
  color:var(--color-navy);
  background:rgba(22,32,46,0.08);
}

.hero{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:0;
  padding:var(--space-7) var(--space-4);
  min-height:70vh;
  background:var(--accent);
  color:white;
}
.hero-layout{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:var(--space-5);
  align-items:center;
}
.hero-content{
  max-width:960px;
  margin:0;
  background:transparent;
  color:white;
  border:none;
  border-radius:0;
  padding:0;
  box-shadow:none;
}
.hero-eyebrow{
  display:inline-block;
  padding:6px 10px;
  border-radius:var(--radius-sm);
  background:var(--surface);
  border:1px solid var(--border);
  font-size:0.9rem;
  margin-bottom:10px;
}
.hero h1{ margin:0 0 12px 0; font-size:2.9rem; letter-spacing:-0.01em; font-weight:600; color:white; }
.hero-title-centered{ text-align:center; font-size:2.9rem; }
.hero-sub{ margin:12px 0 28px 0; color:var(--color-slate); line-height:1.7; max-width:760px; font-size:1.15rem; }
.hero-sub-centered{ text-align:center; margin-left:auto; margin-right:auto; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; justify-content:center; align-items:center; }
.hero-actions .secondary-button{
  background:var(--surface);
  color:var(--accent);
  border:1px solid var(--accent);
  padding:10px 16px;
  font-weight:700;
}
.hero-actions .secondary-button:hover{
  background:var(--surface);
  color:var(--accent);
  border-color:var(--accent);
  text-decoration:none;
}
.hero-footnote{ margin-top:4px; color:rgba(255,255,255,0.8); font-size:0.95rem; text-align:center; }
.hero-media{
  display:flex;
  justify-content:center;
}
.hero-video{
  width:100%;
  max-width:520px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,0.25);
  box-shadow:0 10px 30px rgba(22,32,46,0.12);
}
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}
.typed-line{
  font-size:1.95rem;
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.1;
  margin-top:2px;
  margin-bottom:26px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:3.6rem;
}
.typed-word{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16ch;
  font-weight:600;
  font-size:2.9rem;
  line-height:1.2;
  color:white;
  font-family: inherit;
  box-sizing:border-box;
}

@media(max-width:900px){
  .hero-layout{
    grid-template-columns:1fr;
  }
  .hero-media{
    order:-1;
    margin-bottom:var(--space-2);
  }
}
.typed-word::after{
  content:"";
  display:inline-block;
  width:2px;
  height:1.2em;
  background:rgba(255,255,255,0.8);
  animation: caretBlink 1s steps(2, start) infinite;
}
@keyframes caretBlink{
  0%, 50% { opacity:1; }
  50.01%, 100% { opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .typed-word::after{ animation:none; }
}
.hero-actions .btn-primary{
  background:var(--color-teal);
  color:var(--color-navy);
  font-weight:700;
  border:1px solid transparent;
}
.hero-actions .btn-primary.book-demo,
.hero-learner-link{
  min-width:170px;
  height:46px;
  padding:0 1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  box-sizing:border-box;
}
.hero-actions .btn-primary:hover{
  background:var(--action-hover);
}
.hero-learner-link{
  color:rgba(255,255,255,0.92);
  text-decoration:none;
  font-weight:600;
  font-size:1rem;
  border:1px solid rgba(255,255,255,0.22);
  border-radius:0.75rem;
  background:transparent;
}
.hero-learner-link:hover{
  color:var(--color-white);
  border-color:rgba(255,255,255,0.68);
  background:rgba(255,255,255,0.08);
  text-decoration:none;
}
.hero-learner-link:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(255,255,255,0.28);
}
.panel-title{ margin:0 0 8px 0; font-weight:700; color:var(--text) }
.panel-lede{ margin:0 0 10px 0; color:var(--text-muted); line-height:1.6 }
.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,191,166,0.15);
  border:0.5px solid rgba(0,191,166,0.22);
  color:var(--color-teal);
  font-weight:700;
  font-size:0.9rem;
}
.badge.ghost{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.8);
}
.secondary-button.full-width{ width:100%; text-align:center }

.section{ margin-top:46px; }
.section.alt .feature-card{ background:transparent; border-color:transparent; color:var(--text) }
.section-head h2{ margin:0; color:var(--text); font-weight:600; }
.section-sub{ margin:6px 0 16px 0; color:var(--text-muted); line-height:1.6; max-width:720px; }
.steps-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}
.step-card{
  background:transparent;
  border:none;
  border-radius:var(--radius-md);
  padding:0;
  box-shadow:none;
  display:flex;
  align-items:center;
  gap:12px;
}
.step-num{
  width:32px; height:32px;
  border-radius:8px;
  background:var(--accent);
  display:grid; place-items:center;
  font-weight:800;
  color:white;
}
.step-body{ display:flex; flex-direction:column; gap:4px; }
.step-card h3{ margin:0; color:var(--text); font-weight:600; }
.step-card p{ margin:0; color:var(--text-muted); line-height:1.6 }
.feature-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px }
.feature-grid.stacked{ grid-template-columns: 1fr; }
.feature-card{
  background:transparent;
  border:none;
  border-radius:var(--radius-md);
  padding:0;
  box-shadow:none;
}
.feature-card.highlight{
  background:var(--surface);
  border:1px solid var(--border);
  padding:var(--space-4);
  box-shadow:0 1px 0 rgba(22,32,46,0.04);
}
.feature-card h3{ margin:0 0 6px 0; color:var(--text); font-weight:600; }
.feature-card p{ margin:0; color:var(--text-muted); line-height:1.65 }
.feature-card p.spaced{ margin-top:10px; }
.feature-list{
  margin:0;
  padding-left:18px;
  color:var(--text);
  line-height:1.6;
}
.feature-list li+li{ margin-top:8px; }

.problem-section{
  text-align:left;
  max-width:none;
  width:100vw;
  margin:0 calc(50% - 50vw);
  padding:var(--space-7) var(--space-4);
  
  border-radius:var(--radius-md);
}
.problem-section .section-head{
  justify-content:center;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.problem-section .section-head h2{
  font-size:1.75rem;
  font-weight:600;
  margin:0 0 var(--space-4) 0;
  text-align:center;
}
.problem-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--space-6);
  align-items:start;
  max-width:1100px;
  margin:0 auto;
}
.problem-col{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.problem-col.gap p{ color:var(--text-muted); }
.problem-col.solution p{ color:var(--text); }
.problem-label{
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-size:0.85rem;
  color:var(--text-muted);
  margin-bottom:4px;
}
.problem-col p{
  margin:0 0 var(--space-2) 0;
  line-height:1.65;
}
.problem-col p:last-child{ margin-bottom:0; }
.problem-col + .problem-col{
  border-left:1px solid var(--border);
  padding-left:var(--space-5);
}
.comparison-table{
  max-width:1100px;
  margin:0 auto;
  border:1px solid rgba(22,32,46,0.09);
  border-radius:var(--radius-md);
  background:var(--surface);
  overflow:hidden;
  padding-top:0;
}
.comparison-header,
.comparison-row{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.comparison-col,
.comparison-kicker{
  display:block;
  font-size:0.7rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--text-muted);
  margin-bottom:6px;
}
.comparison-sub{
  display:block;
  margin-top:2px;
  font-size:0.68rem;
  color:var(--color-slate);
  font-weight:500;
  letter-spacing:0.06em;
  margin-bottom:12px;
}
.comparison-cell.left{
  background:rgba(22,32,46,0.03);
}
.comparison-cell{
  padding:24px 20px;
}
.comparison-header{
  background:transparent;
  font-weight:500;
  color:var(--text);
}
.comparison-col.left{
  background:rgba(22,32,46,0.03);
}
.comparison-header .comparison-col{
  padding-top:14px;
  padding-bottom:14px;
  text-align:center;
  font-size:1rem;
  font-weight:600;
  border-bottom:none;
  margin-bottom:0;
}

.comparison-col.right,
.comparison-cell.right{
  background:rgba(0,191,166,0.07);
  border-left:1px solid rgba(0,191,166,0.18);
}
.comparison-row{
  border-top:1px solid rgba(22,32,46,0.08);
}
.comparison-cell{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 20px 16px 20px;
  color:var(--text-muted);
}
.comparison-cell p{
  margin:0;
  line-height:1.45;
  font-size:0.96rem;
}
.comparison-dimension{
  font-weight:600;
  color:var(--text);
}
.comparison-icon{
  width:15px;
  height:15px;
  margin-top:2px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.comparison-icon svg{
  width:15px;
  height:15px;
}
.comparison-icon.bad{ color:var(--color-slate); }
.comparison-icon.good{ color:var(--color-teal); }
.section-label-centered{
  display:block;
  width:100%;
  text-align:center;
}

.section-label{
  display:inline-block;
  font-size:0.72rem;
  letter-spacing:0.08em;
  color:var(--text-muted);
  margin-bottom:10px;
}
.section-note{
  margin:10px auto 52px auto;
  max-width:760px;
  color:var(--text-muted);
  font-size:0.9rem;
  text-align:center;
}
.comparison-takeaway{
  margin:32px auto 0 auto;
  text-align:center;
  font-size:0.95rem;
  color:var(--text-muted);
  font-weight:600;
  max-width:820px;
}
@media (max-width: 900px){
  .comparison-table{
    border:1px solid var(--border);
    background:var(--surface);
    overflow:hidden;
    display:grid;
    grid-template-columns:1fr;
    gap:0;
  }
  .comparison-header{
    display:contents;
  }
  .comparison-row{
    display:contents;
  }
  .comparison-col,
  .comparison-cell{
    grid-column:1;
  }
  .comparison-col.left{
    order:1;
  }
  .comparison-cell.left{
    order:2;
  }
  .comparison-col.right{
    order:3;
    border-left:none;
    border-top:1px solid rgba(0,191,166,0.18);
  }
  .comparison-cell.right{
    order:4;
    border-left:none;
  }
  .comparison-cell{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:14px 18px;
    border-top:1px solid rgba(22,32,46,0.08);
  }
  .comparison-icon{
    margin-top:3px;
  }
}

.problem-footnote{
  margin:var(--space-4) 0 0 0;
  color:var(--text-muted);
  font-style:italic;
  text-align:center;
}
.problem-table-wrap.old-hidden{
  max-width:1100px;
  margin:0 auto;
  overflow-x:auto;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:0 1px 0 rgba(22,32,46,0.04);
}
.problem-table{
  width:100%;
  border-collapse:collapse;
  background:var(--surface);
  table-layout:fixed;
}
.problem-table .status-bad::before,
.problem-table .status-good::before{
  display:inline-block;
  margin-right:8px;
  font-weight:700;
}
.problem-table .status-bad::before{ content:""; display:none; }
.problem-table .status-good::before{ content:""; display:none; }
.problem-table .status-wrap{
  display:flex;
  gap:10px;
  align-items:center;
}
.problem-table .status-icon{
  width:18px;
  height:18px;
  margin-top:2px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.problem-table .status-icon svg{
  width:18px;
  height:18px;
  display:block;
}
.problem-table .status-icon-bad svg{ stroke:var(--color-navy); }
.problem-table .status-icon-good svg{ stroke:var(--color-teal); }

.problem-table td.status-bad,
.problem-table td.status-good{
  vertical-align:top;
}
.problem-table .status-icon{
  width:18px;
  height:18px;
  margin-top:2px;
  flex:0 0 auto;
}
.problem-table .status-icon svg{
  width:18px;
  height:18px;
  display:block;
}
.problem-table .status-text{ display:block; }

.problem-table th,
.problem-table td{
  padding:14px 16px;
  text-align:left;
  vertical-align:top;
  display:table-cell;
  width:50%;
}
.problem-table th.status-good{
  background:rgba(22,32,46,0.04);
  border-left:1px solid rgba(22,32,46,0.08);
  border-right:1px solid rgba(22,32,46,0.08);
}
.problem-table th.status-bad{
  background:rgba(22,32,46,0.08);
}
.problem-table th{
  background:rgba(22,32,46,0.08);
  color:var(--text);
  font-weight:600;
  border-bottom:none;
  text-align:center;
}
.problem-table td{
  color:var(--text-muted);
}
.problem-table td.status-good{
  background:rgba(22,32,46,0.04);
  border-left:1px solid rgba(22,32,46,0.08);
  border-right:1px solid rgba(22,32,46,0.08);
}
.problem-table tbody tr:nth-child(even) td{
  background:transparent;
}

@media (max-width:1023px){
  .problem-grid{
    grid-template-columns:1fr;
    gap:var(--space-4);
  }
  .problem-col + .problem-col{
    border-left:none;
      padding-left:0;
    padding-top:var(--space-4);
    margin-top:var(--space-4);
  }
}

.how-band{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  background:var(--color-warm);
  padding:var(--space-5) var(--space-4) calc(var(--space-4) * 2);
}
.how-inner{
  max-width:1200px;
  margin:0 auto;
  text-align:left;
}
.how-inner h2{
  margin:0 0 var(--space-3) 0;
  color:var(--text);
  font-weight:600;
  text-align:center;
}
.how-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-4);
  position:relative;
}
.how-step{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.how-step:not(:last-child)::after{
  content:"↓";
  color:var(--accent);
  font-weight:700;
  font-size:1.08rem;
  display:block;
  margin-top:var(--space-2);
}
.how-card{
  width:100%;
  max-width:720px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--space-4);
  box-shadow:0 1px 0 rgba(22,32,46,0.04);
  text-align:left;
}
.how-grid h4{ margin:0 0 6px 0; color:var(--text); font-weight:600; }
.how-grid p{ margin:0; color:var(--text-muted); line-height:1.6; }

.how-sub{
  margin:10px auto 24px;
  color:var(--text-muted);
  text-align:center;
  max-width:860px;
  line-height:1.6;
}
.how-steps{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.how-step-card{
  display:flex;
  gap:18px;
  padding:16px 18px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
}
.how-step-left{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  min-width:72px;
}
.how-step-icon{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--border);
  display:grid;
  place-items:center;
  color:var(--accent);
  background:rgba(255,255,255,0.04);
}
.how-step-icon svg{
  width:22px;
  height:22px;
}
.how-step-body h4{
  margin:0 0 6px 0;
  font-size:1.15rem;
}
.how-step-body p{
  margin:0;
  color:var(--text-muted);
  line-height:1.6;
}
.learner-note{
  margin-top:8px;
  font-size:0.9rem;
  color:var(--muted-2);
}
.how-summary{
  margin-top:20px;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,191,166,0.08);
  color:var(--text);
  text-align:center;
  font-weight:600;
}
@media (max-width: 860px){
  .how-step-card{ flex-direction:column; align-items:flex-start; }
  .how-step-left{ flex-direction:row; }
}
.how-card{
  display:flex;
  gap:14px;
  align-items:center;
}
.how-icon{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.06);
  display:grid;
  place-items:center;
  color:var(--text);
  flex-shrink:0;
}
.how-icon svg{
  width:20px;
  height:20px;
}
.how-card.program-step .how-icon{
  border-color:rgba(0,191,166,0.35);
  color:var(--color-teal);
}
.how-card.learner-step .how-icon{
  border-color:rgba(0,191,166,0.18);
  color:var(--color-teal);
}
.how-step:nth-child(3)::after{ display:none; }

.faq-section{
  width:100vw;
  margin:24px 0 0;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:var(--space-7) var(--space-4);
  background:var(--color-warm);
}
.faq-inner{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  max-width:960px;
  margin:0 auto;
}
.faq-section h2{
  margin:0;
  font-size:1.75rem;
  font-weight:600;
  text-align:center;
}
.faq-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.faq-group{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.faq-group:first-of-type{
  margin-top:8px;
}
.faq-group h3{
  margin:0 0 4px 0;
  font-size:1.1rem;
  color:var(--text);
}
.faq-group + .faq-group{
  margin-top:18px;
}
.faq-followup{
  margin-top:18px;
  text-align:center;
  color:var(--text-muted);
}
.faq-followup p{
  margin:0;
}
.faq-followup a{
  display:inline-block;
  margin-top:0;
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
}
.faq-followup a:hover{
  text-decoration:underline;
}
.faq-list details{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--space-3);
  background:var(--surface);
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.faq-list details:hover{
  transform:translateY(-4px);
  box-shadow:0 4px 10px rgba(22,32,46,0.08);
}
.faq-list summary{
  cursor:pointer;
  font-weight:600;
  color:var(--text);
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{
  content:"+";
  font-weight:700;
  color:var(--text-muted);
  margin-left:12px;
}
.faq-list details[open] summary::after{
  content:"–";
}
.faq-list details[open] summary{ margin-bottom:var(--space-2); }
.faq-list p{
  margin:0;
  color:var(--text-muted);
  line-height:1.65;
}

.demo-cta{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-bottom:0;
  padding:calc(var(--space-6) * 1.2) var(--space-4);
  background:var(--color-navy);
  border-top:1px solid rgba(255,255,255,0.07);
  border-bottom:1px solid rgba(255,255,255,0.07);
  border-radius:0;
  box-shadow:none;
}
.demo-cta .cta-content{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-5);
  flex-direction:column;
  flex-wrap:wrap;
  max-width:1200px;
  margin:0 auto;
  text-align:center;
}
.demo-cta h3{
  margin:0 0 9px 0;
  font-weight:600;
  font-size:1.7rem;
  letter-spacing:-0.01em;
  color:white;
}
.demo-cta p{
  margin:0;
  color:rgba(255,255,255,0.82);
  line-height:1.6;
}
.demo-cta .cta-actions{
  display:flex;
  gap:var(--space-2);
  align-items:center;
  justify-content:center;
}
.demo-cta .primary-button{
  background:var(--color-teal);
  color:var(--color-navy);
  border:1px solid transparent;
}
.demo-cta .primary-button:hover{
  background:var(--action-hover);
}
.legal-main{
  max-width:820px;
  margin:0 auto;
  padding:var(--space-7) var(--space-4) var(--space-8);
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  color:var(--text);
}
.legal-main h1{
  margin:0;
  font-weight:600;
  font-size:1.8rem;
}
.legal-section{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.legal-section h2{
  margin:0;
  font-weight:600;
  font-size:1.15rem;
}
.legal-section p{
  margin:0;
  color:var(--text);
  line-height:1.65;
}
.legal-section ul{
  margin:0;
  padding-left:20px;
  color:var(--text);
  line-height:1.6;
}

/* ── Marketing nav palette overrides ─────────────────────────── */

/* Landing page (has hero): transparent nav that sticks with navy bg on scroll */
.marketing-body:not(.demo-page) .marketing-header{
  background:transparent;
  position:sticky;
  top:0;
  z-index:100;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.marketing-body:not(.demo-page) .marketing-header.scrolled{
  background:var(--color-navy);
  border-bottom:0.5px solid rgba(255,255,255,0.1);
}

/* Demo/legal pages: solid cream nav */
.marketing-body.demo-page .marketing-header{
  background:var(--color-warm);
  border-bottom:0.5px solid rgba(22,32,46,0.09);
  position:sticky;
  top:0;
  z-index:100;
}
.marketing-body.demo-page .header-login{ color:var(--color-navy); }
.marketing-body.demo-page .header-login:hover{ color:var(--color-steel); text-decoration:underline; }
.marketing-body.demo-page .btn-primary.book-demo{
  background:var(--color-teal);
  color:var(--color-navy);
  border-color:transparent;
}
.marketing-body.demo-page .btn-primary.book-demo:hover{ background:var(--action-hover); }

/* Landing page book-demo button: amber (same as other pages) */
.marketing-body:not(.demo-page) .btn-primary.book-demo{
  background:var(--color-teal);
  color:var(--color-navy);
  border-color:transparent;
}
.marketing-body:not(.demo-page) .btn-primary.book-demo:hover{
  background:var(--action-hover);
}

/* Lang-toggle on dark nav */
.marketing-body:not(.demo-page) .header-cta .lang-toggle .lang-current{
  background:transparent;
  border:1px solid rgba(255,255,255,0.2);
  color:var(--color-slate);
}
.marketing-body:not(.demo-page) .header-cta .lang-toggle .lang-options{
  background:var(--color-navy);
  border-color:rgba(255,255,255,0.15);
}
.marketing-body:not(.demo-page) .header-cta .lang-toggle .lang-options a{
  color:var(--color-slate);
  background:transparent;
}
.marketing-body:not(.demo-page) .header-cta .lang-toggle .lang-options a:hover{
  background:rgba(255,255,255,0.08);
  color:#FFFFFF;
}

/* ─────────────────────────────────────────────────────────────── */

.cta-band{
  margin-top:46px;
  padding:22px 24px;
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:var(--text);
  box-shadow:none;
  text-align:center;
  flex-wrap:wrap;
}
.cta-band h2{ margin:0 0 6px 0 }
.cta-band p{ margin:0; color:var(--text-muted) }
.primary-button.large{ padding:12px 20px }

@media(max-width:900px){
  .cta-band{ flex-direction:column; align-items:flex-start; }
  .marketing-header{ flex-direction:row; align-items:center; }
  .marketing-footer{ grid-template-columns:1fr; text-align:left; }
}

/* Chat window (override old light styles) */

#chat-window {
  border-radius: 10px;
  padding: 14px;
  width: 100%;
  max-width: 100%;
  height: auto;
  background: var(--color-warm);
  border: 1px solid var(--border);
  margin: 0;
  box-sizing: border-box;
  overflow-y: auto;
  color: var(--text);
}

.chat-panel #chat-window {
  height: clamp(150px, 22vh, 210px);
  background: var(--color-warm);
  border: 1px solid var(--border);
  flex: 1;
  margin-bottom: 10px;
}
.chat-panel #chat-window.module-chat-hidden{
  display:none;
}

.conversation-summary #chat-window {
  height: auto;
  max-height: 260px;
  background: var(--color-warm);
  border: 1px solid var(--border);
  margin-bottom: 0;
}

.message {
  margin-bottom: 10px;
  display: flex;
}

.message.user {
  justify-content: flex-end;
}

.message.assistant {
  justify-content: flex-start;
}

.bubble {
  max-width: 90%;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: none;
}

.message.user .bubble {
  background: var(--accent);
  color: var(--color-white);
  border-color: var(--accent);
}

.message.assistant .bubble{
  color: var(--text);
}

.meta {
  font-size: 0.7rem;
  opacity: 0.8;
  margin-bottom: 2px;
  color: var(--muted);
}

.message.user .meta {
  color: rgba(255, 255, 255, 0.85);
}

.message.assistant .meta {
  color: var(--muted);
}

.content {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
}

/* Feedback */

#feedback {
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 10px;
}

#feedback h2 {
  font-size: 1rem;
  margin: 0 0 6px 0;
}

#feedback pre {
  white-space: pre-wrap;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  margin: 0;
  color: var(--color-navy);
}

.conversation-summary {
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--color-warm);
  max-height: 350px;
  overflow-y: auto;
}

.conversation-summary h3 {
  font-size: 0.9rem;
  color: var(--color-steel);
  margin: 0 0 12px 0;
  font-weight: 600;
}

.feedback-content {
  margin-bottom: 20px;
  flex: none;
  overflow: visible;
  min-height: auto;
}

.feedback-content h3 {
  font-size: 0.9rem;
  color: var(--color-steel);
  margin: 0 0 12px 0;
  font-weight: 600;
}

.feedback-text {
  white-space: pre-wrap;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  margin: 0;
  color: var(--color-navy);
  background: var(--color-mist);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  overflow-x: auto;
}

/* Landing Page */

.landing-panel {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 14px 36px rgba(22,32,46,0.14);
  box-sizing: border-box;
  max-width: 960px;
  margin: 0 auto;
  border:1px solid var(--border);
  color: var(--text);
}

.landing-panel h2 {
  font-size: 1.8rem;
  color: var(--text);
  margin: 0 0 16px 0;
}

.intro-text {
  font-size: 1.05rem;
  color: var(--muted);
  margin-bottom: 32px;
  line-height: 1.6;
}

.guide-section {
  margin-bottom: 32px;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.guide-section h3 {
  font-size: 1.2rem;
  color: var(--text);
  margin: 0 0 12px 0;
  font-weight: 600;
}

.guide-section ul,
.guide-section ol {
  margin: 0 0 16px 0;
  padding-left: 24px;
  line-height: 1.8;
  color: var(--muted-2);
}

.guide-section li {
  margin-bottom: 10px;
  color: var(--muted-2);
}

.guide-section strong {
  color: var(--text);
  font-weight: 600;
}
.guide-wrap{
  max-width:820px;
  margin:var(--space-7) auto var(--space-6);
  text-align:left;
}
.guide-wrap .guide-section:nth-of-type(odd){
  background: rgba(22,32,46,0.06);
}
.guide-wrap .guide-section:nth-of-type(even){
  background: var(--surface);
}
.guide-title{
  margin:0 0 12px 0;
  font-size:2rem;
  font-weight:600;
  color:var(--text);
}
.guide-head{ margin-bottom:10px; }
.guide-sub{ margin:4px 0 0 0; color:var(--text-muted); }
.guide-grid.two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.guide-grid.two h4{ margin-top:0; }
.callout{
  margin-top:12px;
  padding:12px 14px;
  background:rgba(22,32,46,0.08);
  border-left:4px solid var(--accent);
  border-radius:var(--radius-sm);
  color:var(--text);
  line-height:1.6;
}
.guide-list{ padding-left:18px; color:var(--text); }
.guide-list li{ margin-bottom:6px; color:var(--text-muted); }
.guide-list strong{ color:var(--text); }
.guide-steps{
  margin:8px 0 0 0;
  padding-left:18px;
  color:var(--text-muted);
}
.subgrid{ margin-top:10px; }
.subgrid-col{ background:transparent; border:none; padding:0; }

.rotatingSuffix{
  display:inline-block;
  min-width:14ch;
  will-change: opacity, transform;
  font-weight:500;
}
.rotatingSuffix.enter{
  opacity:0;
  transform:translateY(4px);
}
.rotatingSuffix.enterActive{
  opacity:1;
  transform:translateY(0);
  transition: opacity 320ms ease, transform 320ms ease;
}
.rotatingSuffix.exitActive{
  opacity:0;
  transform:translateY(-4px);
  transition: opacity 320ms ease, transform 320ms ease;
}

.cta-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  margin-top: 32px;
  box-shadow: 0 14px 36px rgba(22,32,46,0.14);
  color: var(--text);
}

.cta-section h3 {
  font-size: 1.4rem;
  color: var(--text);
  margin: 0 0 12px 0;
}

.cta-section p {
  font-size: 1rem;
  color: var(--muted);
  margin: 0 0 20px 0;
  line-height: 1.6;
}

.cta-button {
  display: inline-block;
  background: var(--action);
  color: var(--color-white);
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid transparent;
  box-shadow: 0 4px 12px rgba(0,191,166,0.18);
}

.cta-button:hover {
  background: var(--action-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,191,166,0.18);
}

/* Dashboard styles */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.scenario-card {
  background: var(--surface);
  border-radius: 12px;
  padding: 18px;
  box-shadow: none;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align:left;
}

.scenario-card.coming-soon {
  opacity: 0.94;
}

.scenario-header {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  gap: 6px;
}

.scenario-icon {
  width: 20px;
  height: 20px;
  color: var(--text);
  flex: 0 0 auto;
}

.scenario-emoji {
  font-size: 1.35rem;
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.scenario-header h4 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--color-navy);
  flex: 0 1 auto;
  display: inline-block;
}

.scenario-badge {
  font-size: 0.75rem;
  background: var(--color-mist);
  color: var(--color-teal);
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 600;
}

.scenario-badge.muted {
  background: var(--color-mist);
  color: var(--color-slate);
}

.scenario-desc {
  margin: 12px 0 16px 0;
  color: var(--color-steel);
  line-height: 1.45;
  flex: 1 1 auto;
}

.scenario-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.scenario-actions .scenario-cta {
  flex: 0 1 160px;
  width: 160px;
  height: 40px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (max-width:900px){
  .scenario-actions{ flex-direction:column; align-items:stretch; }
  .scenario-actions .scenario-cta{ width:100%; flex:1 1 auto; }
}

.scenario-cta {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: white;
  background: var(--primary);
  border: 1px solid transparent;
  box-shadow: 0 6px 18px rgba(0,191,166,0.12);
  transition: background-color 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease;
}

.scenario-cta:hover, .scenario-cta:focus{
  background: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,191,166,0.12);
}

.scenario-cta.ghost {
  background: var(--primary);
  color: white;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(0,191,166,0.12);
  transition: background-color 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease;
}

.scenario-cta.ghost:hover, .scenario-cta.ghost:focus{
  background: var(--primary-light);
  transform: translateY(-2px);
}

/* Dashboard overrides for dark palette */
.landing-panel.full-width{
  background: var(--surface);
  color: var(--text);
  border:1px solid var(--border);
  box-shadow:none;
}
.landing-panel.full-width h1,
.landing-panel.full-width p{ color: var(--text); }

.dashboard-grid{ margin-top: 20px; }
.scenario-card{
  background: var(--surface);
  border:1px solid var(--border);
  box-shadow:none;
  color: var(--text);
}
.scenario-card h4{ color: var(--text); }
.scenario-desc{ color: var(--text-muted); }
.scenario-badge{
  background: rgba(22,32,46,0.06);
  color: var(--text);
}
.scenario-badge.muted{
  background: rgba(22,32,46,0.04);
  color: var(--text-muted);
}
.scenario-card.coming-soon{
  background: var(--surface);
  border-color: var(--border);
}

/* Hover lift for cards */
.scenario-card:hover {
  transform: translateY(-4px);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 4px 10px rgba(22,32,46,0.08);
}

.trend-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  text-align:left;
}
.trend-controls{
  margin-top:4px;
  display:flex;
  justify-content:flex-start;
}
.trend-select{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.85rem;
  color:var(--text-muted);
}
.trend-select select{
  min-width:140px;
}
@media (min-width: 900px){
  .trend-header{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
  .trend-controls{
    margin-top:0;
  }
}

.trend-panel{ margin-top:24px; }
.trend-card{
  background:linear-gradient(180deg, var(--color-white) 0%, rgba(231,247,244,0.46) 100%);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.trend-header{
  display:grid;
  grid-template-columns:minmax(220px, 1fr) auto auto;
  gap:16px;
  align-items:start;
}
.trend-header .panel-title{
  margin-bottom:8px;
}
.trend-stats{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.trend-stat{
  min-width:96px;
  padding:10px 12px;
  border:1px solid rgba(22,32,46,0.08);
  border-radius:12px;
  background:rgba(255,255,255,0.78);
}
.trend-stat span{
  display:block;
  margin-bottom:4px;
  font-size:0.72rem;
  font-weight:700;
  color:var(--color-steel);
}
.trend-stat strong{
  display:block;
  color:var(--color-navy);
  font-size:1.15rem;
  line-height:1.1;
}
.trend-controls{
  display:flex;
  justify-content:flex-end;
  margin:0;
}
.trend-select{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  color:var(--color-steel);
  font-size:0.85rem;
  font-weight:600;
}
.trend-select .input-text{
  min-width:140px;
  margin:0;
  background:var(--color-white);
}
.trend-chart{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:18px;
  padding:14px 12px 10px;
  border:1px solid rgba(22,32,46,0.08);
  border-radius:14px;
  background:rgba(255,255,255,0.72);
}
.trend-svg{
  width:100%;
  height:190px;
  display:block;
}
.trend-tick{
  font-size:0.7rem;
  fill:var(--color-steel);
  text-anchor:end;
  dominant-baseline:middle;
}
.trend-grid-line{
  stroke:rgba(74,111,150,0.18);
  stroke-width:1;
}
.trend-area{
  fill:url(#trendAreaFill);
}

.trend-line{
  fill:none;
  stroke:var(--color-teal);
  stroke-width:2.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.trend-dot-halo{
  fill:var(--color-white);
  stroke:rgba(0,191,166,0.3);
  stroke-width:1.4;
}
.trend-dot{
  fill:var(--color-teal);
}
.trend-point-label{
  fill:var(--color-navy);
  font-size:0.68rem;
  font-weight:700;
  text-anchor:middle;
}
.trend-labels{
  display:flex;
  justify-content:space-between;
  font-size:0.75rem;
  color:var(--color-steel);
  padding-left:42px;
  padding-right:24px;
}
.trend-window{
  display:inline-block;
  margin-left:6px;
  color:var(--color-steel);
  font-weight:600;
}

@media (max-width: 900px){
  .trend-header{
    grid-template-columns:1fr;
  }
  .trend-stats,
  .trend-controls{
    justify-content:flex-start;
  }
  .trend-select{
    width:100%;
    justify-content:space-between;
  }
  .trend-select .input-text{
    min-width:0;
    flex:1;
  }
}

.table-wrap{
  width:100%;
  overflow-x:auto;
}
.data-table th.sortable{
  cursor:pointer;
  user-select:none;
}
.data-table th.sortable .sort-indicator{
  margin-left:6px;
  font-size:0.85em;
  color:var(--text-muted);
}
.data-table th.sortable.is-sorted .sort-indicator{
  color:var(--text);
}
.data-table th.sortable.is-sorted.is-asc .sort-indicator{
  transform:rotate(180deg);
  display:inline-block;
}

.data-table{
  width:100%;
  border-collapse:collapse;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:visible;
}
.data-table th,
.data-table td{
  padding:12px 14px;
  text-align:left;
  font-size:0.95rem;
  color:var(--text);
}
.data-table thead th{
  font-weight:600;
  color:var(--text-muted);
  background:rgba(22,32,46,0.04);
  border-bottom:none;
}
.data-table tbody tr + tr td{
  border-top:none;
}
.data-table tbody tr:hover td{
  background:rgba(22,32,46,0.04);
}

.history-panel{
  margin-top:30px;
  background:rgba(22,32,46,0.08);
  border:1px solid var(--border);
  border-radius:0;
  padding:18px;
  box-shadow:none;
}
.history-panel.standalone{
  margin-top:var(--space-6);
}
.history-panel.flush{
  padding-top:0;
}

.history-panel.flush .panel-head{
  margin-top:0;
}

.history-panel.flush .history-inner{
  margin-top:0;
}

.history-panel.plain{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:var(--space-6) 0;
  border-radius:0;
}
.history-panel.full-bleed{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding-left:0;
  padding-right:0;
  margin-top:0;
}
.saved-panel{
  margin-top:calc(var(--space-6) * 0.2);
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
}
.saved-panel.full-bleed{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.saved-inner{
  max-width:1200px;
  margin:8px auto 0;
  padding:var(--space-4) var(--space-5) var(--space-5);
  text-align:left;
}
.saved-panel .panel-title{
  font-size:1.08rem;
  color:var(--text);
  margin-bottom:var(--space-2);
}
.saved-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-3);
}
.saved-card{
  border-radius:var(--radius-md);
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:16px;
  min-height:120px;
}
.saved-card-main{
  min-width:0;
}
.saved-title{
  font-weight:600;
  color:var(--text);
  margin-bottom:6px;
}
.saved-meta{
  color:var(--muted);
  font-size:0.92rem;
  margin-bottom:0;
}
.saved-actions .secondary-button{
  min-height:44px;
  padding:10px 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

.admin-users-head{
  margin-bottom:10px;
}

.admin-users-intro{
  margin:0;
}

.admin-users-overview{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:12px;
}

.admin-users-overview-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px;
}

.admin-users-overview-label{
  font-size:0.82rem;
  color:var(--text-muted);
  margin-bottom:4px;
}

.admin-users-overview-value{
  font-size:1.2rem;
  font-weight:700;
  color:var(--text);
  line-height:1.25;
}

.admin-users-overview-value-sm{
  font-size:1rem;
}

.admin-users-cohort-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.admin-users-cohort-chip{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(22,32,46,0.06);
  color:var(--text);
  font-size:0.85rem;
  font-weight:600;
}

.admin-users-cohort-chip.muted{
  color:var(--text-muted);
  background:rgba(22,32,46,0.03);
}

.admin-users-form-help{
  margin-top:0;
  margin-bottom:10px;
}

.admin-users-add-form{
  width:min(100%, 920px);
  max-width:920px;
  display:grid;
  grid-template-columns:minmax(280px, 1.15fr) minmax(260px, 1fr) auto;
  align-items:flex-end;
  gap:12px;
}

.admin-users-add-form label{
  width:100%;
  margin-bottom:0;
}

.admin-users-email-field{
  min-width:320px;
}

.admin-users-add-form .admin-users-email-field{
  width:100% !important;
  min-width:320px !important;
}

.admin-users-add-form .admin-users-email-field input[type="email"]{
  width:100% !important;
  min-width:320px !important;
}

.admin-users-add-btn{
  width:auto;
  white-space:nowrap;
}

.learner-search-wrap{
  margin-bottom:14px;
}
.learner-search-input{
  width:100%;
  max-width:420px;
}
.admin-learner-card{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  column-gap:16px;
  min-height:64px;
  padding-top:10px;
  padding-bottom:10px;
}

.admin-learner-card-main{
  min-width:0;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:14px;
}

.admin-learner-card .saved-meta{
  margin-bottom:0;
}

.admin-learner-metrics{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
}

.admin-learner-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(22,32,46,0.05);
  color:var(--text-muted);
  font-size:0.84rem;
  font-weight:600;
}

.admin-learner-card .saved-actions{
  justify-self:end;
  align-self:center;
  margin:0;
}

.instructor-builder-card .panel-head{
  margin-bottom:10px;
}

.scenario-builder-form{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:14px;
}

.scenario-builder-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0;
  font-weight:600;
  color:var(--color-navy);
}

.scenario-builder-form label > span,
.scenario-dimension-fieldset legend{
  font-size:0.92rem;
  line-height:1.35;
}

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

.scenario-builder-wide{
  grid-column:1 / -1;
}

.scenario-builder-form textarea{
  min-height:86px;
  resize:vertical;
}

.scenario-builder-form textarea[name="description"],
.scenario-builder-form textarea[name="starting_prompt"]{
  min-height:64px;
}

.scenario-dimension-fieldset{
  margin:0;
  padding:0;
  border:0;
}

.scenario-dimension-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:10px;
}

.scenario-dimension-option{
  min-height:96px;
  flex-direction:row !important;
  align-items:flex-start;
  gap:10px !important;
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.72);
}

.scenario-dimension-option input{
  width:18px;
  height:18px;
  margin-top:3px;
  flex:0 0 auto;
}

.scenario-dimension-option strong{
  display:block;
  color:var(--color-navy);
  font-size:0.95rem;
  line-height:1.35;
}

.scenario-dimension-option small{
  display:block;
  margin-top:4px;
  color:var(--color-steel);
  font-size:0.84rem;
  font-weight:500;
  line-height:1.45;
}

.scenario-builder-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.scenario-publish-toggle{
  flex-direction:row !important;
  align-items:center !important;
  gap:8px !important;
  color:var(--color-steel) !important;
  font-weight:600 !important;
}

.scenario-publish-toggle input{
  width:18px;
  height:18px;
}

.scenario-management-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap:18px;
  align-items:start;
}

.scenario-admin-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.scenario-admin-item{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:14px;
  align-items:center;
  padding:14px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--color-white);
}

.scenario-admin-item.active{
  border-color:rgba(0,191,166,0.42);
  box-shadow:0 8px 22px rgba(22,32,46,0.07);
}

.scenario-admin-main{
  min-width:0;
}

.scenario-admin-title-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:4px;
}

.scenario-admin-title-row h3{
  margin:0;
  color:var(--color-navy);
  font-size:1rem;
  line-height:1.35;
}

.scenario-admin-item .scenario-desc{
  margin:8px 0 0;
}

.scenario-admin-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.scenario-admin-actions .secondary-button{
  min-height:40px;
  padding:8px 12px;
  white-space:nowrap;
}

.scenario-preview-card{
  position:sticky;
  top:18px;
}

.scenario-preview-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.scenario-preview-title{
  margin:0 0 4px;
  color:var(--color-navy);
  font-size:1.05rem;
  line-height:1.35;
}

.scenario-preview-block{
  padding-top:10px;
  border-top:1px solid var(--border);
}

.scenario-preview-block strong{
  display:block;
  color:var(--color-navy);
  font-size:0.9rem;
  margin-bottom:4px;
}

.scenario-preview-block p{
  margin:0;
  color:var(--color-steel);
  line-height:1.5;
}

.scenario-preview-dimensions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.scenario-preview-test{
  align-self:flex-start;
}

@media (max-width: 760px){
  .admin-users-add-form{
    grid-template-columns:1fr;
    align-items:stretch;
    gap:10px;
  }

  .admin-users-email-field{
    min-width:0;
  }

  .admin-users-add-btn{
    width:100%;
  }

  .admin-learner-card{
    grid-template-columns:1fr;
    row-gap:10px;
    align-items:flex-start;
  }

  .admin-learner-card-main{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .admin-learner-card .saved-actions{
    justify-self:flex-start;
  }

  .scenario-builder-grid,
  .scenario-dimension-grid,
  .scenario-management-grid{
    grid-template-columns:1fr;
  }

  .scenario-admin-item{
    grid-template-columns:1fr;
    align-items:flex-start;
  }

  .scenario-admin-actions{
    justify-content:flex-start;
  }

  .scenario-preview-card{
    position:static;
  }
}

.saved-panel .history-empty{
  background:var(--surface);
  border:1px dashed var(--border);
  color:var(--text-muted);
  border-radius:var(--radius-sm);
  padding:12px;
}
.history-empty.light{
  background:rgba(22,32,46,0.08);
  color:var(--text-muted);
  border-color:var(--border);
}

.history-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--space-4);
  text-align:left;
}
.eval-overview{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:var(--space-3);
  margin-bottom:var(--space-4);
  text-align:left;
}
.eval-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--space-3);
  box-shadow:0 1px 0 rgba(22,32,46,0.04);
}
.split-overview{
  grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
}
.performance-card{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.performance-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.performance-card-title{
  margin:0;
  font-size:1.08rem;
  line-height:1.2;
  color:var(--text);
}
.performance-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:4px 10px;
  font-size:0.78rem;
  font-weight:700;
  background:rgba(22,32,46,0.1);
  border:1px solid rgba(22,32,46,0.16);
  color:var(--text);
  white-space:nowrap;
}
.performance-tag.muted{
  background:rgba(22,32,46,0.06);
  border-color:rgba(22,32,46,0.12);
}
.performance-metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(110px,1fr));
  gap:10px;
}
.performance-metric{
  background:rgba(22,32,46,0.05);
  border:1px solid rgba(22,32,46,0.12);
  border-radius:var(--radius-sm);
  padding:10px;
}
.performance-theme-label{
  margin-bottom:2px;
}
.module-progress-table th,
.module-progress-table td{
  white-space:nowrap;
  vertical-align:middle;
}
.module-progress-table th:first-child,
.module-progress-table td:first-child{
  min-width:220px;
}
.module-progress-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:88px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(22,32,46,0.06);
  color:var(--text);
  font-size:0.82rem;
  font-weight:700;
  letter-spacing:0.01em;
}
.module-progress-pill.not_started{
  background:rgba(22,32,46,0.05);
  border-color:rgba(22,32,46,0.16);
  color:var(--text-muted);
}
.module-progress-pill.in_progress{
  background:rgba(0,191,166,0.12);
  border-color:rgba(0,191,166,0.3);
  color:var(--text);
}
.module-progress-pill.completed{
  background:rgba(0,191,166,0.14);
  border-color:rgba(0,191,166,0.3);
  color:var(--text);
}
.module-struggle-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:12px;
}
.module-struggle-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:12px;
}
.module-struggle-title{
  margin:0;
  font-size:1rem;
  color:var(--text);
}
.module-struggle-meta{
  margin:6px 0 0 0;
}
.scenario-performance-list{
  display:grid;
  gap:10px;
  margin-top:12px;
}
.scenario-performance-row{
  display:grid;
  grid-template-columns:minmax(180px, 1fr) minmax(320px, 1.6fr);
  gap:18px;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:12px;
}
.scenario-performance-title{
  margin:0;
  color:var(--text);
  font-size:0.98rem;
  line-height:1.25;
}
.scenario-performance-bars{
  display:grid;
  gap:9px;
}
.scenario-performance-metric{
  display:grid;
  grid-template-columns:116px minmax(120px, 1fr);
  gap:10px;
  align-items:center;
}
.scenario-performance-label{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  color:var(--text-muted);
  font-size:0.86rem;
  font-weight:700;
}
.scenario-performance-label strong{
  color:var(--text);
  font-size:0.94rem;
}
.scenario-performance-bar{
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(22,32,46,0.08);
}
.scenario-performance-fill{
  display:block;
  min-width:3px;
  height:100%;
  border-radius:inherit;
}
.scenario-performance-fill.attempts{
  background:var(--accent);
}
.scenario-performance-fill.score{
  background:#4169a8;
}
@media (max-width: 760px){
  .scenario-performance-row{
    grid-template-columns:1fr;
    gap:10px;
  }
  .scenario-performance-metric{
    grid-template-columns:92px minmax(90px, 1fr);
  }
}
.module-tab-bar{
  display:flex;
  gap:4px;
  border-bottom:2px solid var(--border);
  padding-bottom:0;
}
.module-tab{
  display:inline-block;
  text-decoration:none;
  color:var(--text-muted);
  font-weight:600;
  font-size:0.95rem;
  padding:8px 16px;
  border-radius:8px 8px 0 0;
  border:2px solid transparent;
  border-bottom:none;
  margin-bottom:-2px;
  transition:color 0.15s, background 0.15s;
}
.module-tab:hover{
  color:var(--text);
  background:rgba(22,32,46,0.04);
}
.module-tab.active{
  color:var(--color-teal, #00bfa6);
  background:var(--surface);
  border-color:var(--border);
  border-bottom-color:var(--surface);
}
.side-sublink-indent{
  padding-left:22px;
  font-size:0.82rem;
  font-weight:500;
  color:var(--text-muted);
  opacity:0.85;
}
.side-sublink-indent:hover{
  opacity:1;
}
.side-sublink-indent.active{
  opacity:1;
}
.dashboard-history-label{
  margin-bottom:10px;
}
.eval-label{
  color:var(--text-muted);
  font-size:0.95rem;
  margin-bottom:6px;
}
.eval-value{
  font-weight:700;
  color:var(--text);
  font-size:1.08rem;
}

/* Scenario Library hero-style band */
.scenario-band{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  background:var(--accent);
  color:white;
  padding:var(--space-7) var(--space-4);
  min-height:70vh;
  box-sizing:border-box;
}
.scenario-band .scenario-inner{
  max-width:1200px;
  margin:0 auto;
  text-align:center;
}
.scenario-band h1{
  margin:0 0 var(--space-4) 0;
  color:white;
  font-size:2rem;
  font-weight:600;
}
.scenario-band .intro-text{
  color:rgba(255,255,255,0.9);
  margin:0 auto;
}
.history-list{ display:flex; flex-direction:column; gap:12px; }
.themes-card{
  margin-top:var(--space-3);
  margin-bottom:var(--space-4);
  padding-top:var(--space-3);
}
.themes-divider{
  width:100%;
  height:1px;
  background:var(--border);
  margin:var(--space-3) 0;
}
.history-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:12px var(--space-3);
  color:var(--text);
  box-shadow:0 1px 0 rgba(22,32,46,0.04);
  overflow:visible;
}
.history-link-card{
  display:block;
  text-decoration:none;
  transition:border-color 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
}
.history-link-card:hover,
.history-link-card:focus{
  border-color:rgba(0,191,166,0.45);
  box-shadow:0 10px 24px rgba(22,32,46,0.08);
  transform:translateY(-1px);
}
.history-link-card:focus{
  outline:3px solid var(--focus);
  outline-offset:2px;
}
.history-card summary{
  cursor:pointer;
  list-style:none;
  display:block;
  padding:0;
}
.history-card summary::-webkit-details-marker{ display:none; }
.history-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:6px;
  font-weight:700;
  color:var(--text);
}
.history-title{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.history-score{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(22,32,46,0.06);
  border:1px solid rgba(22,32,46,0.16);
  color:var(--accent);
  font-weight:600;
  font-size:0.95rem;
}
.history-date{ color:var(--muted); font-weight:500; font-size:0.9rem; }
.history-preview{
  color:var(--text-muted);
  font-size:0.95rem;
}
.history-body{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:12px;
  text-align:left;
}
.history-card summary{
  text-align:left;
}
.history-heading{
  font-weight:700;
  margin-bottom:6px;
  color:var(--text);
}
.history-pre{
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  color:var(--text);
  white-space:pre-wrap;
  max-height:240px;
  overflow-y:auto;
  font-family:inherit;
  line-height:1.5;
}
.history-pre.muted{ color:var(--muted); }
.history-empty{
  color:var(--text-muted);
  padding:12px;
  border-radius:var(--radius-sm);
  border:1px dashed var(--border);
  background:var(--surface);
}

.feedback-loading{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:20px 0;
}
.feedback-loading .spinner{
  width:36px;
  height:36px;
  border-radius:50%;
  border:3px solid rgba(22,32,46,0.2);
  border-top-color:var(--accent);
  animation:spin 0.9s linear infinite;
}
.feedback-loading .loading-text{
  color:var(--text-muted);
  font-weight:600;
}
.feedback-loading.hidden{ display:none; }
.feedback-content[hidden]{ display:none !important; }
.feedback-content.ready{ display:block; }

@keyframes spin{
  to { transform:rotate(360deg); }
}
.themes-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:var(--space-2) 0 0 0;
  justify-content:flex-start;
}
.theme-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(22,32,46,0.08);
  border:1px solid rgba(22,32,46,0.16);
  color:var(--text);
  font-weight:600;
}
.theme-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  padding:2px 6px;
  border-radius:999px;
  background:white;
  color:var(--accent);
  border:1px solid rgba(22,32,46,0.2);
  font-weight:700;
  font-size:0.9rem;
}

.site-footer{
  width:100vw;
  margin:0 calc(50% - 50vw);
  background:var(--color-warm);
  padding:4px 20px;
  color:var(--color-steel);
  font-weight:400;
  box-sizing:border-box;
}
.site-footer .footer-inner{
  max-width:1200px;
  margin:4px auto 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  font-size:0.9rem;
}
.footer-left{
  color:var(--text-muted);
  font-weight:400;
}
.footer-nav{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.footer-nav a{
  color:var(--color-navy);
  text-decoration:none;
  font-weight:500;
}
.footer-nav a:hover{
  color:var(--color-teal);
  text-decoration:underline;
}

/* Small screens */

@media (max-width: 900px) {
  .landing-panel {
    padding: 24px;
  }

  .landing-panel h2 {
    font-size: 1.5rem;
  }

  .guide-section h3 {
    font-size: 1.1rem;
  }

  .cta-section {
    padding: 20px;
  }

  .cta-section h3 {
    font-size: 1.2rem;
  }
  .app-main {
    grid-template-columns: minmax(0, 1fr);
    max-width: 100%;
  }

  .config-panel {
    order: 1;
  }

  .chat-panel {
    order: 2;
  }
  .history-body{ grid-template-columns:1fr; }
}

/* Force saved scenarios styling (override any cached/old rules) */
.saved-panel{
  margin-top:calc(var(--space-6) * 0.2) !important;
}
.saved-panel.full-bleed{
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}
.saved-card{
  padding:12px var(--space-3) !important;
}
.saved-panel .history-empty{
  background:var(--surface) !important;
  border:1px dashed var(--border) !important;
  color:var(--text-muted) !important;
  border-radius:var(--radius-sm) !important;
  padding:12px !important;
}

.footer-split{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
  align-items:center;
}
.footer-brand{
  max-width:none;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:8px;
  color:var(--color-steel);
}
.footer-brand .brand-logo{
  width:136px;
  max-width:100%;
  height:auto;
}
.footer-brand a{
  color:var(--color-navy);
  text-decoration:none;
  font-weight:600;
}
.footer-brand a:hover{
  color:var(--color-teal);
  text-decoration:underline;
}
.footer-links{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
}
.footer-socials a{
  color:var(--text);
  text-decoration:none;
  font-weight:600;
}
.footer-socials a:hover{
  text-decoration:underline;
}
.footer-bottom{
  margin-top:18px;
  padding:14px 0 0;
  border-top:0.5px solid rgba(22,32,46,0.09);
  color:var(--color-steel);
  text-align:left;
  font-size:0.9rem;
  width:100%;
  max-width:1200px;
  margin-left:0;
  margin-right:0;
}
.footer-bottom-wrap{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  display:flex;
  justify-content:flex-start;
}
@media (max-width: 780px){
  .footer-split{ flex-direction:column; }
  .footer-links{ align-items:flex-start; }
}

.linkedin-logo{
  width:24px;
  height:auto;
  display:block;
}

.hero-benefits{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:24px;
  color:var(--color-steel);
  font-size:0.9rem;
  font-weight:600;
}
.hero-benefit{
  display:flex;
  align-items:center;
  gap:6px;
}
.hero-benefit svg{
  width:18px;
  height:18px;
  color:var(--color-teal);
}
.hero-benefit.science-based svg{
  color:var(--color-teal);
}

.hero-layout.solo{
  grid-template-columns:1fr;
  justify-items:center;
  align-content:center;
  min-height:70vh;
}
.hero-layout.solo .hero-content{
  text-align:center;
}

.program-learner-grid{
  display:grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap:24px;
  margin-top:22px;
}
.program-block h3{
  margin:0 0 12px 0;
  font-size:1.15rem;
  color:var(--text);
}
.program-steps{
  list-style:none;
  padding:0;
  margin:0 0 18px 0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.program-steps li{
  display:flex;
  flex-direction:column;
  gap:2px;
  color:var(--text);
}
.program-steps .step-title{
  font-weight:600;
}
.program-steps .step-desc{
  color:var(--text-muted);
}
.program-shot img{
  width:100%;
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow:0 12px 28px rgba(22,32,46,0.12);
}
.learner-block{
  background:rgba(0,191,166,0.08);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  color:var(--text);
  font-size:0.95rem;
}
.learner-block h3{
  margin:0 0 10px 0;
  font-size:1rem;
}
.learner-block ul{
  margin:0 0 14px 18px;
  color:var(--muted-2);
}
.learner-shot img{
  width:100%;
  border-radius:12px;
  border:1px solid var(--border);
}
.shot-caption{
  margin-top:6px;
  font-size:0.85rem;
  color:var(--text-muted);
}
@media (max-width: 980px){
  .program-learner-grid{ grid-template-columns:1fr; }
}

.program-layout{
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap:20px;
  align-items:start;
}
.program-text{
  display:flex;
  flex-direction:column;
}
@media (max-width: 980px){
  .program-layout{ grid-template-columns:1fr; }
}

.footer-mail{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.footer-mail-icon{
  width:16px;
  height:16px;
}

.program-stepper-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap:32px;
  margin-top:24px;
  align-items:center;
}
.program-stepper{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:22px;
  position:relative;
}
.program-stepper::before{
  content:"";
  position:absolute;
  left:14px;
  top:6px;
  bottom:6px;
  width:2px;
  background:rgba(0,191,166,0.25);
}
.program-stepper li{
  display:flex;
  gap:14px;
  align-items:center;
  position:relative;
}
.step-badge{
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(0,191,166,0.3);
  background:rgba(0,191,166,0.08);
  color:var(--color-navy);
  font-size:0.85rem;
  font-weight:600;
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.step-body h4{
  margin:0 0 4px 0;
  font-size:1.15rem;
  font-weight:600;
  color:var(--text);
}
.step-body p{
  margin:0;
  color:var(--text-muted);
  line-height:1.5;
}
.step-learner{
  margin-top:6px;
  font-size:0.9rem;
  color:var(--muted-2);
  font-style:italic;
}
.insight-card{
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  background:var(--surface);
}
.insight-label{
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin-bottom:6px;
}
.insight-card h3{
  margin:0 0 6px 0;
  font-size:1.1rem;
  font-weight:600;
  color:var(--text);
}
.insight-card p{
  margin:0 0 12px 0;
  color:var(--text-muted);
  line-height:1.5;
}
.insight-card img{
  width:100%;
  border-radius:12px;
  border:1px solid var(--border);
}
.learner-experience-section{
  width:100vw;
  margin-top:16px;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  background:var(--color-warm);
  padding:var(--space-5) var(--space-4) calc(var(--space-4) * 2);
}
.learner-experience-section .section-head{
  max-width:1200px;
  margin:0 auto;
  display:block;
  text-align:center;
}
.learner-experience-section .section-head h2{
  margin:0 0 var(--space-3) 0;
}
.learner-experience-section .section-sub{
  margin:0 auto;
}
.learner-experience-grid{
  max-width:1200px;
  margin:24px auto 0;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.8fr);
  gap:32px;
  align-items:center;
}
.learner-feedback-shot{
  background:var(--surface);
}
.learner-feedback-shot img{
  border-radius:8px;
}
.learner-stepper{
  margin-top:0;
  align-self:center;
}
@media (max-width: 980px){
  .program-stepper-grid{ grid-template-columns:1fr; }
  .learner-experience-grid{ grid-template-columns:1fr; }
}

.btn-primary{
  background: var(--action);
  color:var(--color-white);
  border-radius:0.75rem;
  padding:0.75rem 1.25rem;
  font-weight:600;
  border:1px solid transparent;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  text-decoration:none;
}
.btn-primary:hover{ background: var(--action-hover); }
.btn-primary:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px var(--action-ring);
}
.btn-secondary{
  background:transparent;
  color:var(--color-navy);
  border:1px solid rgba(22,32,46,0.08);
  border-radius:0.75rem;
  padding:0.75rem 1.25rem;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  text-decoration:none;
}
.btn-secondary:hover{ background:var(--color-warm); }
.btn-secondary:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(22,32,46,0.12);
}
.link-accent{
  color:var(--action);
  font-weight:600;
  text-decoration:none;
}
.link-accent:hover{
  color:var(--action-hover);
  text-decoration:underline;
}
.link-accent:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px var(--action-ring);
  border-radius:0.375rem;
}
.header-cta .btn-primary.slim,
.header-cta .btn-secondary.slim,
.header-cta .btn-secondary.book-demo{
  padding:6px 10px;
  font-size:0.9rem;
  line-height:1.1;
}

.btn-primary.book-demo{
  background: var(--action);
  color:var(--color-white);
  border-color:transparent;
  border-radius:0.75rem;
  padding:0.6rem 1rem;
  box-shadow:none;
}
.btn-primary.book-demo:hover{
  background: var(--action-hover);
}
.btn-primary.book-demo:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px var(--action-ring);
}

.footer-hosted{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:12px;
}
.footer-hosted img{
  width:18px;
  height:auto;
  display:block;
}
@media (max-width: 600px){
  .footer-hosted{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-left:0;
    margin-top:6px;
  }
}

.footer-bottom-row{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
}
.footer-bottom-row .footer-hosted{
  margin-left:auto;
}
@media (max-width: 600px){
  .footer-bottom-row{ flex-direction:column; align-items:flex-start; }
  .footer-bottom-row .footer-hosted{ margin-left:0; }
}

.footer-contact{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.footer-linkedin{
  display:inline-flex;
  align-items:center;
}

.header-login{
  color:var(--color-slate);
  text-decoration:none;
  font-weight:600;
  padding:6px 0;
}
.header-login:hover{
  color:#FFFFFF;
  text-decoration:underline;
}
.header-login:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(0,191,166,0.35);
  border-radius:0.375rem;
}
.header-cta .lang-toggle{ margin-left:2px; }
.header-cta .lang-toggle .lang-current{
  border:none;
  background:transparent;
  padding:6px 4px;
  color:var(--text);
}
.header-cta .lang-toggle .lang-current:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(22,32,46,0.12);
  border-radius:0.5rem;
}
.header-cta .lang-toggle .lang-current:hover{
  background:var(--surface);
}
.header-cta .lang-toggle .lang-options{
  right:0;
}
.header-cta-divider{
  width:1px;
  height:20px;
  background:rgba(138,156,176,0.5);
}

.app-login-body{
  min-height:100vh;
  background:linear-gradient(180deg, var(--color-warm) 0%, var(--color-mist) 100%);
}
.app-login-shell{
  min-height:100vh;
  padding:0;
}
.app-login-layout{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(300px, 360px) 1fr;
}
.app-login-side{
  background:var(--color-mist);
  border-right:1px solid var(--border);
  padding:36px 28px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.app-login-brand{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:0;
  margin:0 0 8px;
  background:transparent;
  border:none;
  border-radius:0;
}
.app-login-brand .brand-logo{
  height:45px;
}
.app-login-kicker{
  margin:0;
  font-size:0.78rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--color-slate);
  font-weight:700;
}
.app-login-side-title{
  margin:0;
  font-size:1.35rem;
  line-height:1.4;
  color:var(--color-navy);
  font-weight:650;
  max-width:24ch;
}
.app-login-language{
  margin-top:auto;
  display:inline-flex;
  width:max-content;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--color-warm);
  padding:3px;
  gap:3px;
}
.app-login-language a{
  text-decoration:none;
  color:var(--color-slate);
  font-weight:600;
  font-size:0.82rem;
  padding:6px 12px;
  border-radius:999px;
}
.app-login-language a.active{
  background:var(--color-white);
  color:var(--color-navy);
  box-shadow:0 1px 1px rgba(22,32,46,0.08);
}
.app-login-main{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 24px;
}
.app-login-card{
  width:min(460px, 100%);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px 24px 24px;
  box-shadow:0 16px 30px rgba(22,32,46,0.06);
}
.login-page .login-title{
  margin:0 0 20px;
  text-align:center;
}
.login-page .feedback-warning{
  margin-bottom:12px;
}
.login-page .config-form{
  width:min(100%, 300px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.login-page .config-form label{
  text-align:left;
  margin:0;
}
.login-page .config-form input[type="email"],
.login-page .config-form input[type="password"]{
  width:100%;
}
.login-page .config-form .primary-button{
  align-self:center;
  margin-top:4px;
  width:190px;
  min-width:170px;
  justify-content:center;
  text-align:center;
  background:var(--action);
  border-color:transparent;
}
.login-page .config-form .primary-button:hover{
  background:var(--action-hover);
}
.login-page .config-form .primary-button:focus{
  outline:none;
  box-shadow:0 0 0 4px var(--action-ring);
}

@media (max-width: 900px){
  .app-login-layout{
    grid-template-columns:1fr;
  }
  .app-login-side{
    border-right:none;
    border-bottom:1px solid var(--border);
    padding:22px 18px;
    gap:12px;
  }
  .app-login-side-title{
    max-width:none;
    font-size:1.1rem;
  }
  .app-login-language{
    margin-top:4px;
  }
  .app-login-main{
    padding:22px 16px 28px;
  }
  .app-login-card{
    padding:22px 16px 18px;
  }
}

.footer-desc-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
  width:100%;
}
.footer-desc-row p{
  margin:0;
  flex:1;
  max-width:520px;
}
.footer-nav.footer-nav-inline{
  flex-direction:row;
  align-items:center;
  gap:18px;
  margin-left:auto;
}
@media (max-width: 780px){
  .footer-desc-row{ flex-direction:column; }
  .footer-nav.footer-nav-inline{
    width:100%;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    gap:22px;
    margin-left:0;
    text-align:center;
  }
  .footer-contact{
    width:100%;
    justify-content:center;
  }
}

.demo-page .demo-main{
  background:rgba(22,32,46,0.04);
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:64px var(--space-4) 72px;
}
.demo-page .demo-inner{
  max-width:1100px;
  margin:0 auto;
}

.demo-page .legal-main{
  background:transparent;
  width:auto;
  max-width:820px;
  margin:0 auto;
  padding:var(--space-7) var(--space-4) var(--space-8);
  align-items:stretch;
}

.app-layout .history-panel.full-bleed,
.app-layout .saved-panel.full-bleed{
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}



.scenario-actions .scenario-cta.btn-primary,
.saved-actions .scenario-cta.btn-primary{
  background:var(--action) !important;
  color:var(--color-white) !important;
  border:1px solid transparent !important;
}
.scenario-actions .scenario-cta.btn-primary:hover,
.saved-actions .scenario-cta.btn-primary:hover{
  background:var(--action-hover) !important;
}

.module-path-head{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  margin-bottom:16px;
}

.module-path-progress{
  margin:0;
  color:var(--text-muted);
  font-weight:600;
}

.module-progress-panel{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:16px 20px;
  align-items:start;
  margin:0 0 18px 0;
  padding:18px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow-soft);
}

.module-progress-copy h2{
  margin:0;
  color:var(--text);
  font-size:1.1rem;
  line-height:1.2;
}

.module-progress-copy p{
  margin:6px 0 0 0;
  max-width:720px;
  color:var(--text-muted);
  font-size:0.98rem;
  line-height:1.45;
}

.module-progress-stats{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:stretch;
}

.module-progress-stat{
  min-width:118px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--color-white);
}

.module-progress-stat span{
  display:block;
  color:var(--text-muted);
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0;
}

.module-progress-stat strong{
  display:block;
  margin-top:4px;
  color:var(--text);
  font-size:1.2rem;
  line-height:1;
}

.module-progress-track{
  grid-column:1 / -1;
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(155px, 1fr));
  gap:10px;
}

.module-progress-step{
  min-height:96px;
  padding:12px;
  display:grid;
  grid-template-columns:30px minmax(0, 1fr);
  gap:8px 10px;
  align-items:start;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--color-white);
}

.module-progress-step.is-in-progress{
  border-color:rgba(0,191,166,0.32);
  background:rgba(0,191,166,0.07);
}

.module-progress-step.is-completed{
  border-color:rgba(0,191,166,0.42);
  background:rgba(0,191,166,0.11);
}

.module-progress-step-number{
  grid-row:1 / span 2;
  width:30px;
  height:30px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--action);
  background:rgba(0,191,166,0.12);
  border:1px solid rgba(0,191,166,0.22);
  font-weight:800;
}

.module-progress-step-title{
  color:var(--text);
  font-weight:800;
  line-height:1.2;
}

.module-progress-step-score{
  color:var(--text-muted);
  font-size:0.86rem;
  line-height:1.25;
}

.scenario-library-intro{
  max-width:720px;
  margin:-4px 0 18px 0;
  color:var(--text-muted);
  font-size:1.05rem;
  line-height:1.45;
  font-weight:500;
}

.module-path-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.module-path-item{
  display:grid;
  grid-template-columns:34px 1fr auto;
  align-items:flex-start;
  gap:14px;
  padding:14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
}

.module-path-item.custom-scenario-item{
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
}

.module-step-badge{
  width:30px;
  height:30px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  background:rgba(0,191,166,0.12);
  color:var(--text);
}

/* Keep module metadata and CTA centered vertically against the card height */
.module-path-item:not(.custom-scenario-item) .module-step-badge,
.module-path-item:not(.custom-scenario-item) .module-step-actions{
  align-self:center;
}

.module-step-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.module-step-top h4{
  margin:0;
}

.module-step-desc{
  margin:6px 0 0 0;
}

.module-step-metrics{
  margin-top:8px;
  color:var(--text-muted);
  font-size:0.92rem;
}

.module-step-actions{
  display:flex;
  align-items:center;
}

.module-path-item.custom-scenario-item .module-step-actions{
  align-self:center;
  justify-content:flex-end;
}

.module-path-item.custom-scenario-item .scenario-cta{
  min-width:160px;
  justify-content:center;
  text-align:center;
  white-space:nowrap;
}

@media (max-width: 900px){
  .module-progress-panel{
    grid-template-columns:1fr;
  }

  .module-progress-stats{
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  .module-path-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .module-path-item{
    grid-template-columns:34px 1fr;
  }

  .module-step-actions{
    grid-column:2;
  }

  .module-path-item.custom-scenario-item{
    grid-template-columns:1fr;
    align-items:stretch;
  }

  .module-path-item.custom-scenario-item .module-step-actions{
    grid-column:1;
    justify-content:flex-start;
  }

  .module-path-item.custom-scenario-item .scenario-cta{
    width:100%;
  }
}

/* Responsive sidebar toggle (mobile / narrow viewports) */
.sidebar-toggle{
  display:none;
  align-items:center;
  gap:8px;
  width:fit-content;
  justify-self:start;
  align-self:flex-start;
  margin:0 0 14px 0;
  padding:9px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  color:var(--text);
  font-weight:700;
  cursor:pointer;
}

.sidebar-toggle:hover{
  background:var(--color-warm);
}

.sidebar-toggle:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
}

.sidebar-toggle .sidebar-toggle-icon{
  font-size:1.1rem;
  line-height:1;
}

.sidebar-backdrop{
  display:none;
}

@media (max-width: 900px){
  .app-layout{
    display:block;
    position:relative;
    min-height:100vh;
    height:auto;
    padding:0 var(--space-4);
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    width:100vw;
  }

  .app-sidebar{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    margin-left:0;
    width:min(84vw, 300px);
    max-width:300px;
    min-height:100vh;
    border-radius:0 var(--radius-lg) var(--radius-lg) 0;
    transform:translateX(-112%);
    transition:transform 180ms ease, box-shadow 180ms ease;
    z-index:1200;
    overflow-y:auto;
  }

  .app-main.dashboard-main{
    height:auto;
    overflow:visible;
    padding-right:0;
  }

  .sidebar-toggle{
    display:inline-flex;
  }

  .sidebar-backdrop{
    position:fixed;
    inset:0;
    border:0;
    padding:0;
    margin:0;
    background:rgba(22,32,46,0.34);
    opacity:0;
    pointer-events:none;
    transition:opacity 180ms ease;
    z-index:1100;
    cursor:pointer;
    display:block;
  }

  .app-layout.sidebar-open .app-sidebar{
    transform:translateX(0);
    box-shadow:14px 0 38px rgba(22,32,46,0.14);
  }

  .app-layout.sidebar-open .sidebar-backdrop{
    opacity:1;
    pointer-events:auto;
  }
}

body.sidebar-modal-open{
  overflow:hidden;
}

/* Chat V2 visual refresh */
.chat-panel.chat-v2{
  background:linear-gradient(180deg, var(--color-white) 0%, var(--color-mist) 100%);
  border:1px solid var(--border);
  border-radius:18px;
  padding:20px;
  box-shadow:0 18px 36px rgba(22,32,46,0.08);
  display:grid;
  gap:16px;
}

.chat-panel.chat-v2 .chat-topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
}

.chat-panel.chat-v2 .chat-topbar-main{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.chat-panel.chat-v2 .chat-page-title{
  margin:0;
  font-size:32px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:0;
  color:var(--text);
}

.chat-panel.chat-v2 .chat-topbar-sub{
  margin:0;
  color:var(--text-muted);
  font-size:0.95rem;
  line-height:1.5;
}

.chat-panel.chat-v2 .chat-topbar-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.chat-panel.chat-v2 .chat-mode-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(0,191,166,0.25);
  background:rgba(0,191,166,0.1);
  color:var(--color-navy);
  font-size:0.82rem;
  font-weight:700;
  line-height:1;
}

.chat-panel.chat-v2 .chat-mode-pill.soft{
  border-color:var(--border);
  background:var(--color-white);
  color:var(--text-muted);
}

.chat-panel.chat-v2 .chat-timer{
  margin:0;
  padding:6px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--color-white);
  color:var(--text-muted);
  gap:8px;
}

.chat-panel.chat-v2 .chat-timer .timer-value{
  font-size:1.35rem;
  line-height:1;
  letter-spacing:0.03em;
}

.chat-panel.chat-v2 .chat-stage{
  border:1px solid rgba(22,32,46,0.1);
  border-radius:16px;
  background:linear-gradient(180deg, var(--color-mist) 0%, var(--color-mist) 100%);
  padding:16px;
  display:grid;
  gap:14px;
}

.chat-panel.chat-v2 .chat-activity{
  margin:0;
  gap:12px;
}

.chat-panel.chat-v2 .speaker-row{
  gap:62px;
}

.chat-panel.chat-v2 .chat-status-rail{
  width:100%;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--color-white);
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.chat-panel.chat-v2 .chat-status-rail.module{
  justify-content:space-between;
}

.visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0, 0, 0, 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.chat-panel.chat-v2 .chat-status-rail.module.voice-status-compact{
  justify-content:center;
  border:none;
  background:transparent;
  padding:0;
}

.chat-panel.chat-v2 .voice-status-compact .chat-status-stack{
  align-items:center;
  min-width:0;
}

.chat-panel.chat-v2 .voice-status-compact .chat-status-line{
  font-weight:600;
  color:var(--color-steel);
}

.chat-panel.chat-v2 .voice-state-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:112px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(22,32,46,0.1);
  background:var(--color-white);
  color:var(--color-navy);
  font-size:0.88rem;
  font-weight:800;
}

.chat-panel.chat-v2 .voice-state-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:var(--color-slate);
}

.chat-panel.chat-v2 .voice-state-pill.state-listening .voice-state-dot{
  background:var(--color-teal);
  box-shadow:0 0 0 5px rgba(0,191,166,0.12);
}

.chat-panel.chat-v2 .voice-state-pill.state-thinking .voice-state-dot{
  background:var(--color-steel);
  animation:speakerBeat 1.2s ease-in-out infinite;
}

.chat-panel.chat-v2 .voice-state-pill.state-speaking .voice-state-dot{
  background:var(--color-navy);
  box-shadow:0 0 0 5px rgba(22,32,46,0.1);
}

.chat-panel.chat-v2 .chat-status-stack{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:220px;
}

.chat-panel.chat-v2 .chat-status-line{
  font-size:0.9rem;
  font-weight:700;
  color:var(--text);
  line-height:1.35;
}

.chat-panel.chat-v2 .chat-status-subline{
  font-size:0.82rem;
  color:var(--text-muted);
  line-height:1.3;
}

.chat-panel.chat-v2 .status-capsule{
  display:inline-flex;
  box-shadow:none;
  border:1px solid var(--border);
  background:var(--color-white);
  color:var(--text);
  padding:7px 12px;
}

.chat-panel.chat-v2 .chat-preflight-button{
  width:36px;
  height:36px;
  padding:0;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--color-white);
  color:var(--color-steel);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.chat-panel.chat-v2 .chat-preflight-button svg{
  width:18px;
  height:18px;
}

.chat-panel.chat-v2 .chat-preflight-button:hover{
  background:var(--color-warm);
  color:var(--color-navy);
  text-decoration:none;
}

.chat-panel.chat-v2 .chat-preflight-button.secondary-button{
  min-height:36px;
  padding:0;
  border-radius:999px;
  background:var(--color-white);
  color:var(--color-steel);
  font-weight:700;
}

.chat-panel.chat-v2 .conversation-ended{
  margin:0;
  border-radius:12px;
  border:1px solid rgba(22,32,46,0.14);
  background:rgba(22,32,46,0.06);
  color:var(--color-navy);
  padding:10px 12px;
}

.chat-panel.chat-v2 #chat-window{
  height:clamp(220px, 36vh, 420px);
  border-radius:14px;
  background:var(--color-white);
  border:1px solid var(--border);
  padding:14px;
  margin:0;
}

.chat-panel.chat-v2 #chat-window[hidden]{
  display:none !important;
}

.chat-panel.chat-v2 #chat-window.transcript-collapsed{
  display:none !important;
}

.chat-panel.chat-v2 .transcript-toggle{
  align-self:flex-start;
  border:1px solid var(--border);
  background:var(--color-white);
  color:var(--color-steel);
  border-radius:999px;
  padding:8px 12px;
  font-size:0.9rem;
  font-weight:800;
  cursor:pointer;
}

.chat-panel.chat-v2 .transcript-dock{
  display:flex;
  justify-content:center;
  margin-top:-2px;
}

.chat-panel.chat-v2 .transcript-toggle:hover{
  color:var(--color-navy);
  background:var(--color-warm);
}

.chat-panel.chat-v2 .chat-control-dock{
  margin-top:0;
  border-top:1px solid var(--border);
  padding-top:14px;
  display:grid;
  gap:12px;
}

.chat-panel.chat-v2 .voice-input{
  padding:0;
}

.chat-panel.chat-v2 .mic-center{
  margin:0;
}

.chat-panel.chat-v2 .mic-button{
  width:min(100%, 440px);
  height:auto;
  min-height:68px;
  border-radius:18px;
  border:1px solid rgba(22,32,46,0.16);
  background:linear-gradient(180deg, var(--color-white) 0%, var(--color-mist) 100%);
  box-shadow:0 12px 22px rgba(22,32,46,0.12);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  padding:14px 18px;
}

.chat-panel.chat-v2 .mic-button:hover{
  transform:translateY(-1px);
}

.chat-panel.chat-v2 .mic-button .mic-icon{
  width:38px;
  height:38px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--color-white);
  border:1px solid rgba(22,32,46,0.1);
  font-size:1.3rem;
}

.chat-panel.chat-v2 .mic-button .mic-label{
  color:var(--color-steel);
  max-width:none;
  line-height:1.2;
  text-align:left;
  font-size:1rem;
}

.chat-panel.chat-v2 .mic-button.listening{
  background:linear-gradient(180deg, var(--color-mist) 0%, rgba(0,191,166,0.14) 100%);
  border-color:rgba(0,191,166,0.45);
}

.chat-panel.chat-v2 .recording-waveform{
  display:none;
  align-items:center;
  gap:3px;
  height:30px;
}

.chat-panel.chat-v2 .recording-waveform span{
  display:block;
  width:4px;
  height:10px;
  border-radius:999px;
  background:var(--color-teal);
  animation:voiceWave 0.9s ease-in-out infinite;
}

.chat-panel.chat-v2 .recording-waveform span:nth-child(2){ animation-delay:0.1s; }
.chat-panel.chat-v2 .recording-waveform span:nth-child(3){ animation-delay:0.2s; }
.chat-panel.chat-v2 .recording-waveform span:nth-child(4){ animation-delay:0.3s; }
.chat-panel.chat-v2 .recording-waveform span:nth-child(5){ animation-delay:0.4s; }

.chat-panel.chat-v2 .mic-button.listening .recording-waveform{
  display:inline-flex;
}

@keyframes voiceWave{
  0%, 100%{ transform:scaleY(0.55); opacity:0.65; }
  50%{ transform:scaleY(1.9); opacity:1; }
}

.chat-panel.chat-v2 .conversation-actions{
  margin:0;
  padding-top:4px;
  justify-content:space-between;
  width:100%;
  gap:10px;
}

.chat-panel.chat-v2 .conversation-actions .inline-form{
  flex:1 1 260px;
}

.chat-panel.chat-v2 .conversation-actions .secondary-button,
.chat-panel.chat-v2 .conversation-actions .primary-button{
  width:100%;
  justify-content:center;
  border-radius:12px;
  min-height:44px;
}

.chat-panel.chat-v2 .conversation-actions .secondary-button{
  border:1px solid var(--border);
  background:var(--color-white);
  color:var(--text);
  text-decoration:none;
}

.chat-panel.chat-v2 .conversation-actions .secondary-button:hover{
  background:var(--color-warm);
  text-decoration:none;
}

.chat-panel.chat-v2 .feedback-warning{
  margin-top:0;
  border-radius:12px;
}

@media (max-width: 900px){
  .chat-panel.chat-v2{
    padding:16px;
    border-radius:14px;
    gap:12px;
  }

  .chat-panel.chat-v2 .chat-page-title{
    font-size:28px;
  }

  .chat-panel.chat-v2 .chat-topbar{
    flex-direction:column;
    align-items:flex-start;
  }

  .chat-panel.chat-v2 .chat-topbar-meta{
    width:100%;
    justify-content:flex-start;
  }

  .chat-panel.chat-v2 .chat-stage{
    padding:12px;
  }

  .chat-panel.chat-v2 .speaker-row{
    gap:26px;
  }

  .chat-panel.chat-v2 .speaker-icon{
    width:106px;
    height:106px;
  }

  .chat-panel.chat-v2 .speaker-icon svg{
    width:54px;
    height:54px;
  }

  .chat-panel.chat-v2 .chat-status-rail.module{
    align-items:flex-start;
  }

  .chat-panel.chat-v2 .chat-preflight-button.secondary-button{
    width:100%;
    justify-content:center;
  }

  .chat-panel.chat-v2 #chat-window{
    height:clamp(180px, 34vh, 300px);
  }

  .chat-panel.chat-v2 .mic-button{
    width:100%;
    min-height:64px;
  }

  .chat-panel.chat-v2 .conversation-actions .inline-form{
    flex:1 1 100%;
  }
}

/* Brand system overrides */
html{
  background:var(--color-warm);
}

body,
p,
li,
label,
input,
textarea,
select,
button,
a,
summary{
  font-family:var(--font-ui);
}

.marketing-body{
  background:var(--color-warm);
  color:var(--color-navy);
}

.marketing-body h1,
.marketing-body h2{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--color-navy);
  letter-spacing:-0.5px;
}

.marketing-body .hero h1,
.marketing-body .hero-title-centered{
  font-size:62px;
  line-height:1.12;
  color:var(--color-white);
}

.marketing-body .section-head h2,
.marketing-body .how-inner h2,
.marketing-body .faq-section h2,
.marketing-body .legal-main > h1{
  font-size:48px;
  line-height:1.18;
}

.marketing-body .faq-group h3{
  font-family:var(--font-display);
  font-size:42px;
  line-height:1.18;
  font-weight:700;
  color:var(--color-navy);
}

.marketing-body .feature-card h3,
.marketing-body .guide-section h3,
.marketing-body .insight-card h3,
.marketing-body .demo-cta h3{
  font-family:var(--font-display);
  font-size:30px;
  line-height:1.3;
  font-weight:700;
  color:var(--color-white);
}

.marketing-body .audience-card h3{
  font-family:var(--font-display);
  font-size:20px;
  line-height:1.3;
  font-weight:700;
  color:var(--color-navy);
}

.marketing-body .audience-section .section-sub{
  color:var(--color-steel);
}

.marketing-body .how-sub{
  color:var(--color-steel);
}

.marketing-body .comparison-section .section-sub{
  color:var(--color-steel);
}

.marketing-body .insight-card h3{
  color:var(--color-navy);
}

/* Final contrast fixes for the light demo page */
.marketing-body.demo-page .intro-text,
.marketing-body.demo-page .feature-card p{
  color:var(--color-steel);
}

.marketing-body.demo-page .feature-card h3{
  color:var(--color-navy);
}

/* Legal/about pages are light pages that reuse marketing-body. Keep all body copy readable after broad marketing text overrides. */
.marketing-body.demo-page .legal-main,
.marketing-body.demo-page .legal-section,
.marketing-body.demo-page .legal-section p,
.marketing-body.demo-page .legal-section li,
.marketing-body.demo-page .legal-section ul,
.marketing-body.demo-page .founder-subtitle{
  color:var(--color-steel) !important;
}

.marketing-body.demo-page .legal-main h1,
.marketing-body.demo-page .legal-section h2,
.marketing-body.demo-page .legal-section h3,
.marketing-body.demo-page .legal-section strong{
  color:var(--color-navy) !important;
}

/* Participant invite and onboarding */
.login-context-note{
  margin:-8px auto 16px;
  max-width:30ch;
  text-align:center;
  color:var(--color-steel);
  font-size:0.95rem;
  line-height:1.5;
}

.login-secondary-link{
  margin:16px 0 0;
  text-align:center;
  font-size:0.92rem;
}

.login-secondary-link a,
.onboarding-policy-link{
  color:var(--color-steel);
  font-weight:600;
  text-decoration:none;
}

.login-secondary-link a:hover,
.onboarding-policy-link:hover{
  color:var(--color-navy);
  text-decoration:underline;
}

.admin-users-add-form select,
.onboarding-form select{
  width:100%;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);
  background:var(--surface);
  color:var(--text);
  font-size:0.95rem;
}

.admin-users-add-form select:focus,
.onboarding-form select:focus{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-color:var(--accent);
}

.onboarding-page{
  min-height:100vh;
  background:var(--color-warm);
}

.onboarding-shell{
  width:min(1040px, calc(100% - 32px));
  min-height:100vh;
  margin:0 auto;
  padding:28px 0 48px;
}

.onboarding-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:56px;
}

.onboarding-brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}

.onboarding-brand img{
  height:38px;
  width:auto;
  display:block;
}

.onboarding-context{
  text-align:right;
  color:var(--color-slate);
  font-size:0.86rem;
  line-height:1.35;
}

.onboarding-context span,
.onboarding-context strong{
  display:block;
}

.onboarding-context strong{
  color:var(--color-navy);
  font-weight:700;
}

.onboarding-main,
.scenario-briefing-main{
  width:min(760px, 100%);
  margin:0 auto;
}

.onboarding-progress{
  margin-bottom:28px;
}

.onboarding-progress span{
  display:block;
  margin-bottom:8px;
  color:var(--color-steel);
  font-size:0.86rem;
  font-weight:700;
}

.onboarding-progress-track{
  height:6px;
  border-radius:999px;
  background:rgba(22,32,46,0.1);
  overflow:hidden;
}

.onboarding-progress-fill{
  height:100%;
  border-radius:999px;
  background:var(--color-teal);
}

.onboarding-error{
  margin-bottom:18px;
}

.onboarding-hero{
  text-align:left;
  margin-bottom:28px;
}

.onboarding-hero.compact{
  margin-bottom:22px;
}

.onboarding-kicker{
  margin:0 0 10px;
  color:var(--color-steel);
  font-size:0.82rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.08em;
}

.onboarding-hero h1{
  margin:0;
  color:var(--color-navy);
  font-size:2.4rem;
  line-height:1.12;
  font-weight:760;
}

.onboarding-subtitle{
  margin:14px 0 0;
  max-width:50ch;
  color:var(--color-steel);
  font-size:1.08rem;
  line-height:1.6;
}

.onboarding-step-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin:28px 0 30px;
}

.onboarding-step-card{
  min-height:150px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--color-white);
  display:flex;
  flex-direction:column;
  gap:18px;
}

.onboarding-step-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--color-mist);
  color:var(--color-navy);
  font-weight:800;
  font-size:0.92rem;
}

.onboarding-step-card h2{
  margin:0;
  color:var(--color-navy);
  font-size:1.02rem;
  line-height:1.35;
}

.privacy-visibility-grid,
.briefing-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:22px 0;
}

.privacy-visibility-list,
.briefing-panel{
  padding:18px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--color-white);
}

.privacy-visibility-list h2,
.briefing-panel h2{
  margin:0 0 10px;
  color:var(--color-navy);
  font-size:1rem;
  line-height:1.3;
}

.privacy-visibility-list ul{
  margin:0;
  padding-left:18px;
  color:var(--color-steel);
}

.privacy-visibility-list li{
  margin:6px 0;
}

.privacy-note{
  margin:12px 0 22px;
  color:var(--color-steel);
  font-weight:600;
}

.onboarding-form{
  text-align:left;
}

.onboarding-checkbox{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--color-navy);
  font-weight:600;
  line-height:1.5;
}

.onboarding-checkbox input{
  margin-top:4px;
  width:18px;
  height:18px;
  accent-color:var(--color-teal);
}

.onboarding-actions{
  margin-top:26px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.self-check-fieldset{
  border:0;
  padding:0;
  margin:0 0 28px;
}

.self-check-fieldset legend,
.self-check-textarea{
  display:block;
  margin:0 0 12px;
  color:var(--color-navy);
  font-size:1rem;
  font-weight:750;
}

.confidence-scale{
  display:grid;
  grid-template-columns:repeat(7, minmax(42px, 1fr));
  gap:8px;
}

.confidence-option input,
.goal-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.confidence-option span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  border:1px solid var(--border-strong);
  border-radius:8px;
  background:var(--color-white);
  color:var(--color-navy);
  font-weight:800;
  cursor:pointer;
}

.confidence-option input:checked + span,
.goal-option input:checked + span{
  border-color:rgba(0,191,166,0.65);
  background:var(--color-mist);
  box-shadow:0 0 0 3px rgba(0,191,166,0.12);
}

.confidence-option input:focus-visible + span,
.goal-option input:focus-visible + span{
  outline:3px solid var(--focus);
  outline-offset:2px;
}

.confidence-scale-labels{
  display:flex;
  justify-content:space-between;
  margin-top:8px;
  color:var(--color-slate);
  font-size:0.86rem;
  font-weight:700;
}

.goal-options{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
}

.goal-option span{
  display:flex;
  align-items:center;
  min-height:46px;
  padding:10px 12px;
  border:1px solid var(--border-strong);
  border-radius:8px;
  background:var(--color-white);
  color:var(--color-navy);
  font-weight:650;
  line-height:1.35;
  cursor:pointer;
}

.self-check-textarea textarea{
  margin-top:8px;
  width:100%;
  border-radius:8px;
}

.invite-status-shell{
  width:min(560px, calc(100% - 32px));
  min-height:100vh;
  margin:0 auto;
  padding:42px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.invite-status-logo{
  height:42px;
  width:max-content;
  margin-bottom:22px;
}

.invite-status-panel{
  padding:26px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--color-white);
}

.invite-status-panel h1{
  margin:0 0 10px;
  color:var(--color-navy);
  font-size:1.45rem;
}

.invite-status-panel p{
  margin:0 0 18px;
  color:var(--color-steel);
}

.briefing-page .onboarding-top{
  margin-bottom:46px;
}

.briefing-panel p{
  margin:0;
  color:var(--color-steel);
  line-height:1.6;
}

.briefing-actions{
  margin-top:24px;
}

@media (max-width: 760px){
  .onboarding-shell{
    width:min(100% - 24px, 640px);
    padding-top:20px;
  }

  .onboarding-top{
    align-items:flex-start;
    margin-bottom:34px;
  }

  .onboarding-brand img{
    height:32px;
  }

  .onboarding-context{
    max-width:52%;
    font-size:0.8rem;
  }

  .onboarding-hero h1{
    font-size:2rem;
  }

  .onboarding-subtitle{
    font-size:1rem;
  }

  .onboarding-step-cards,
  .privacy-visibility-grid,
  .briefing-grid,
  .goal-options{
    grid-template-columns:1fr;
  }

  .onboarding-step-card{
    min-height:auto;
  }

  .confidence-scale{
    grid-template-columns:repeat(7, minmax(34px, 1fr));
    gap:6px;
  }

  .confidence-option span{
    min-height:42px;
  }

  .onboarding-actions .primary-button,
  .onboarding-actions .secondary-button{
    width:100%;
    justify-content:center;
  }
}

.marketing-body.demo-page .intro-text,
.marketing-body.demo-page .feature-card p{
  color:var(--color-steel);
}

.marketing-body.demo-page .feature-card h3{
  color:var(--color-navy);
}

.marketing-body .legal-section p,
.marketing-body .legal-section li{
  color:var(--color-steel);
}

.marketing-body .intro-text{
  color:var(--color-steel);
}

.marketing-body .insight-card p{
  color:var(--color-steel);
}

.marketing-body .step-body h4{
  font-family:var(--font-display);
  font-size:20px;
  line-height:1.3;
  font-weight:700;
  color:var(--color-navy);
}

.marketing-body .hero-sub,
.marketing-body .section-sub,
.marketing-body .how-sub,
.marketing-body .intro-text,
.marketing-body .legal-section p,
.marketing-body .legal-section li,
.marketing-body .audience-card p,
.marketing-body .feature-card p,
.marketing-body .insight-card p,
.marketing-body .demo-cta p{
  font-size:18px;
  line-height:1.7;
  color:rgba(255,255,255,0.82);
}

.marketing-body.demo-page .legal-main,
.marketing-body.demo-page .legal-section,
.marketing-body.demo-page .legal-section p,
.marketing-body.demo-page .legal-section li,
.marketing-body.demo-page .legal-section ul{
  color:var(--color-steel);
}

.marketing-body.demo-page .legal-main h1,
.marketing-body.demo-page .legal-section h2,
.marketing-body.demo-page .legal-section strong{
  color:var(--color-navy);
}

.hero-sub{
  color:var(--color-slate);
}

.typed-line{
  min-height:4.25rem;
}

.typed-word{
  font-family:var(--font-display);
  font-size:62px;
  line-height:1.12;
  font-style:italic;
  font-weight:700;
  color:var(--color-teal);
}

.typed-word::after{
  background:rgba(255,255,255,0.55);
}

.section-label,
.hero-eyebrow,
.badge,
.comparison-kicker,
.comparison-sub,
.insight-label,
.app-login-kicker,
.admin-users-overview-label,
.metric-label,
.panel-sub,
.module-path-progress{
  font-size:11px;
  line-height:1;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:600;
}

.badge,
.hero-eyebrow,
.theme-chip,
.admin-users-cohort-chip,
.admin-learner-pill,
.module-step-badge,
.chat-panel.chat-v2 .chat-mode-pill,
.pace-status,
.status-capsule,
.feedback-warning,
.conversation-ended{
  background:var(--color-mist);
  color:var(--color-navy);
  border:1px solid rgba(0,191,166,0.22);
}

.feedback-warning.success{
  background:var(--color-mist);
  color:var(--color-navy);
  border-color:rgba(0,191,166,0.22);
}

.badge,
.hero-eyebrow,
.section-label,
.insight-label,
.theme-chip,
.module-step-badge{
  color:var(--color-teal);
}

.comparison-sub,
.metric-label,
.panel-sub,
.app-login-kicker,
.module-path-progress{
  color:var(--color-slate);
}

.brand-name{
  font-family:var(--font-logo);
  font-weight:700;
}

.app-shell{
  background:linear-gradient(90deg, var(--color-navy) 0, var(--color-navy) 220px, var(--color-warm) 220px, var(--color-warm) 100%);
}

.app-sidebar{
  background:var(--color-navy);
  border:1px solid var(--border-dark);
  box-shadow:var(--shadow-medium);
  margin-left:0;
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
}

.app-layout{
  gap:20px;
  padding-left:0;
}

.app-main{
  padding-right:var(--space-4);
}

@media (max-width:900px){
  .app-shell{
    background:var(--color-warm);
  }

  .app-layout{
    gap:0;
  }

  .app-main{
    padding-right:0;
  }
}

.side-brand{
  background:transparent;
  border:none;
  border-radius:0;
  padding:0 0 10px 0;
}

.side-link{
  color:var(--color-white);
  font-size:14px;
  font-weight:500;
  border-radius:14px;
}

.side-link:hover,
.side-link.active{
  background:rgba(255,255,255,0.08);
  color:var(--color-white);
  text-decoration:none;
}

.side-sublink{
  color:var(--color-slate);
  font-size:14px;
  font-weight:500;
  border-radius:12px;
  padding:8px 12px;
}

.side-sublink:hover{
  background:rgba(255,255,255,0.06);
  color:var(--color-white);
}

.side-sublink.active{
  background:var(--color-mist);
  color:var(--color-navy);
}

.side-link.danger{
  color:var(--color-slate);
}

.side-link.danger:hover{
  background:rgba(255,255,255,0.08);
  color:var(--color-white);
}

.side-footer{
  border-top:1px solid var(--border-dark);
}

.side-footer .lang-toggle .lang-current{
  background:rgba(255,255,255,0.04) !important;
  border:1px solid var(--border-dark) !important;
  color:var(--color-white) !important;
}

.side-footer .lang-toggle .lang-current:hover{
  background:rgba(255,255,255,0.08) !important;
}

.side-footer .lang-toggle .lang-options{
  background:var(--color-navy);
  border-color:var(--border-dark);
}

.side-footer .lang-toggle .lang-options a{
  color:var(--color-slate);
  background:transparent;
}

.side-footer .lang-toggle .lang-options a:hover{
  background:rgba(255,255,255,0.06);
  color:var(--color-white);
}

.config-panel,
.feedback-panel,
.landing-panel,
.scenario-card,
.history-card,
.saved-card,
.metric-card,
.trend-card,
.module-path-item,
.audience-card,
.guide-section,
.insight-card,
.comparison-table,
.conversation-summary,
.app-login-card,
.demo-form-card,
.legal-section{
  background:var(--color-white);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
}

.legal-section{
  background:transparent;
  border:none;
  box-shadow:none;
}

.panel-title,
.user-page-title,
.settings-panel h1,
.login-page .login-title,
.chat-panel.chat-v2 .chat-page-title,
.app-title h1{
  font-family:var(--font-ui);
  font-weight:600;
  color:var(--color-navy);
}

.user-page-title,
.settings-panel h1{
  font-size:32px;
  line-height:1.2;
}

/* App practice pages should align with the dashboard's top content offset. */
.app-layout .scenario-band.plain{
  margin-top:var(--space-6) !important;
  padding-top:0 !important;
}

.app-main.dashboard-main > .config-panel.full-width,
.app-main.dashboard-main > .chat-panel.chat-v2,
.app-main.single-column > .feedback-panel.full-width{
  margin:var(--space-6) var(--space-4) 0 var(--space-4);
}

.app-main.single-column > .feedback-panel.full-width{
  max-width:1180px;
  width:calc(100% - (var(--space-4) * 2));
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

.feedback-panel.full-width .panel-head{
  margin:0 0 14px 0;
}

.feedback-panel.full-width .panel-title{
  font-size:32px;
  line-height:1.2;
}

.feedback-panel.full-width .feedback-section.metrics{
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
}

.app-main.dashboard-main > .config-panel.full-width{
  max-width:960px;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

.config-panel.full-width > h2{
  margin:0 0 10px 0;
  font-size:32px;
  line-height:1.2;
  font-weight:600;
  color:var(--color-navy);
}

.config-panel.full-width > .config-help{
  margin:0 0 var(--space-5) 0;
  max-width:760px;
  font-size:16px;
  line-height:1.6;
}

.config-panel.full-width .config-form{
  display:grid;
  gap:14px;
}

.config-panel.full-width .config-form label{
  margin:0;
  font-weight:600;
  color:var(--color-navy);
}

.config-panel.full-width .input-text,
.config-panel.full-width input[type="text"],
.config-panel.full-width input[type="file"],
.config-panel.full-width select,
.config-panel.full-width textarea{
  margin-top:6px;
}

.app-main.dashboard-main > .guide-wrap{
  width:100%;
  max-width:1200px;
  margin:var(--space-6) 0 var(--space-6) 0;
  padding-left:var(--space-4);
  padding-right:var(--space-4);
  box-sizing:border-box;
}

.app-main.dashboard-main > .guide-wrap .guide-title{
  margin:0 0 12px 0;
  max-width:1040px;
  font-family:var(--font-ui);
  font-size:32px;
  line-height:1.2;
  font-weight:600;
  color:var(--color-navy);
}

.app-main.dashboard-main > .guide-wrap > .intro-text{
  max-width:1040px;
  margin:0 0 var(--space-5) 0;
  color:var(--color-steel);
  font-size:16px;
  line-height:1.6;
}

.app-main.dashboard-main > .guide-wrap .guide-section{
  margin-bottom:14px;
  padding:18px;
  background:var(--color-white) !important;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
}

.app-main.dashboard-main > .guide-wrap .guide-head{
  margin-bottom:14px;
}

.app-main.dashboard-main > .guide-wrap .guide-section h3{
  margin:0 0 6px 0;
  font-family:var(--font-ui);
  font-size:20px;
  line-height:1.3;
  font-weight:600;
  color:var(--color-navy);
}

.app-main.dashboard-main > .guide-wrap .guide-sub,
.app-main.dashboard-main > .guide-wrap .guide-section p,
.app-main.dashboard-main > .guide-wrap .guide-list li,
.app-main.dashboard-main > .guide-wrap .guide-steps li{
  color:var(--color-steel);
  line-height:1.6;
}

.app-main.dashboard-main > .guide-wrap .guide-grid.two{
  gap:14px;
}

.app-main.dashboard-main > .guide-wrap .guide-grid.two h4,
.app-main.dashboard-main > .guide-wrap .subgrid-col h4{
  margin:0 0 8px 0;
  color:var(--color-navy);
  font-size:15px;
  line-height:1.35;
  font-weight:700;
}

.app-main.dashboard-main > .guide-wrap .guide-list,
.app-main.dashboard-main > .guide-wrap .guide-steps{
  margin:0 0 14px 0;
  padding-left:18px;
}

.app-main.dashboard-main > .guide-wrap .guide-list:last-child,
.app-main.dashboard-main > .guide-wrap .guide-steps:last-child,
.app-main.dashboard-main > .guide-wrap .guide-section p:last-child{
  margin-bottom:0;
}

.app-main.dashboard-main > .guide-wrap .callout{
  margin-top:14px;
  padding:12px 14px;
  background:rgba(231,247,244,0.72);
  border:1px solid rgba(0,191,166,0.24);
  border-left:4px solid var(--color-teal);
  border-radius:var(--radius-sm);
  color:var(--color-navy);
  box-shadow:none;
}

@media (max-width: 760px){
  .app-main.dashboard-main > .guide-wrap .guide-grid.two{
    grid-template-columns:1fr;
  }
}

.panel-title{
  font-size:20px;
  line-height:1.3;
}

.chat-panel.chat-v2 .chat-page-title,
.login-page .login-title{
  font-size:32px;
  line-height:1.2;
}

.panel-lede,
.config-help,
.scenario-desc,
.settings-email,
.chat-panel.chat-v2 .chat-topbar-sub,
.chat-panel.chat-v2 .chat-status-subline,
.message.assistant .meta,
.meta,
.metric-sub,
.shot-caption,
.footer-left,
.footer-bottom,
.footer-brand,
.footer-desc-row p{
  color:var(--color-steel);
}

.input-text,
.input-textarea,
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select{
  background:var(--color-white);
  border:1px solid var(--border);
  color:var(--color-navy);
  font-size:16px;
  line-height:1.65;
}

::placeholder{
  color:var(--color-slate);
}

.input-text:focus,
.input-textarea:focus,
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus{
  outline:3px solid rgba(0,191,166,0.16);
  border-color:rgba(0,191,166,0.42);
}

button,
.primary-button,
.secondary-button,
.ghost-button,
.btn-primary,
.btn-secondary,
.scenario-cta,
.header-links a,
.header-login,
.side-link,
.side-sublink,
.lang-toggle .lang-current,
.lang-options a{
  font-size:14px;
  line-height:1.2;
}

.primary-button,
.btn-primary,
.scenario-cta.btn-primary,
.hero-actions .btn-primary,
.login-page .config-form .primary-button,
.saved-actions .scenario-cta.btn-primary,
.scenario-actions .scenario-cta.btn-primary{
  background:var(--color-teal) !important;
  color:var(--color-navy) !important;
  border:1px solid transparent !important;
  font-size:15px;
  font-weight:600;
  box-shadow:none;
}

.primary-button:hover,
.btn-primary:hover,
.scenario-cta.btn-primary:hover,
.hero-actions .btn-primary:hover,
.login-page .config-form .primary-button:hover,
.saved-actions .scenario-cta.btn-primary:hover,
.scenario-actions .scenario-cta.btn-primary:hover{
  background:var(--action-hover) !important;
}

.primary-button:focus-visible,
.btn-primary:focus-visible,
.secondary-button:focus-visible,
.btn-secondary:focus-visible,
.ghost-button:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(0,191,166,0.18);
}

.secondary-button,
.ghost-button,
.btn-secondary{
  background:var(--color-white);
  color:var(--color-navy);
  border:1px solid var(--border);
  font-size:15px;
  font-weight:600;
  text-decoration:none;
}

.secondary-button:hover,
.ghost-button:hover,
.btn-secondary:hover{
  background:var(--color-mist);
  color:var(--color-navy);
  text-decoration:none;
}

.secondary-button.danger,
.saved-actions .secondary-button.danger{
  color:var(--color-navy);
  border:1px solid var(--border);
  background:var(--color-white);
}

.secondary-button.danger:hover,
.saved-actions .secondary-button.danger:hover{
  color:var(--color-navy);
  background:var(--color-mist);
}

.link-accent,
.text-link{
  color:var(--color-teal);
}

@media (max-width: 900px){
  .saved-card{
    grid-template-columns:1fr;
    align-items:stretch;
  }

  .saved-actions{
    justify-content:flex-start;
  }

  .saved-actions .secondary-button{
    flex:1 1 150px;
  }
}

.link-accent:hover,
.text-link:hover{
  color:var(--action-hover);
}

.marketing-header,
.marketing-body.demo-page .marketing-header{
  background:var(--color-mist);
  border-bottom:1px solid rgba(0,191,166,0.18);
}

.marketing-body:not(.demo-page) .marketing-header,
.marketing-body:not(.demo-page) .marketing-header.scrolled{
  background:var(--color-mist);
  border-bottom:1px solid rgba(0,191,166,0.18);
}

.marketing-body:not(.demo-page) .marketing-shell{
  padding-bottom:0;
}

.marketing-body:not(.demo-page) .brand-mark{
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
}

.header-links{
  font-size:14px;
  font-weight:500;
}

.marketing-body:not(.demo-page) .header-links a,
.marketing-body:not(.demo-page) .header-login{
  color:var(--color-steel);
}

.marketing-body:not(.demo-page) .header-links a:hover,
.marketing-body:not(.demo-page) .header-login:hover{
  color:var(--color-navy);
}

.marketing-body.demo-page .header-links a,
.marketing-body.demo-page .header-login{
  color:var(--color-steel);
}

.marketing-body.demo-page .header-links a:hover,
.marketing-body.demo-page .header-login:hover{
  color:var(--color-navy);
}

.marketing-body:not(.demo-page) .hero-learner-link,
.marketing-body:not(.demo-page) .header-cta .lang-toggle .lang-current{
  background:transparent;
  border:1px solid rgba(22,32,46,0.09);
  color:var(--color-steel);
}

.marketing-body:not(.demo-page) .hero-learner-link{
  border-color:rgba(255,255,255,0.28);
  color:var(--color-white);
}

.marketing-body:not(.demo-page) .hero-learner-link:hover,
.marketing-body:not(.demo-page) .header-cta .lang-toggle .lang-current:hover{
  background:var(--color-white);
  color:var(--color-navy);
}

.marketing-body:not(.demo-page) .header-cta .lang-toggle .lang-options{
  background:var(--color-white);
  border-color:var(--border);
}

.marketing-body:not(.demo-page) .header-cta .lang-toggle .lang-options a{
  color:var(--color-steel);
}

.marketing-body:not(.demo-page) .header-cta .lang-toggle .lang-options a:hover{
  background:rgba(22,32,46,0.04);
  color:var(--color-navy);
}

.hero{
  background:var(--color-navy);
  color:var(--color-white);
}

.demo-cta h3{
  color:var(--color-white);
}

.demo-cta p{
  color:rgba(255,255,255,0.82);
}

.hero-video{
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:var(--shadow-strong);
}

.hero-benefits{
  color:var(--color-slate);
}

.hero-benefit svg,
.hero-benefit.science-based svg{
  color:var(--color-teal);
}

.problem-section,
.how-band,
.demo-page .demo-main,
.demo-page .legal-main{
  background:var(--color-warm);
}

.comparison-table{
  border:1px solid var(--border);
  overflow:hidden;
}

.comparison-header,
.comparison-row{
  background:transparent;
}

.comparison-col.left,
.comparison-cell.left{
  background:rgba(22,32,46,0.03);
}

.comparison-col.right,
.comparison-cell.right{
  background:var(--color-mist);
  border-left:1px solid var(--border);
}

.comparison-row{
  border-top:1px solid var(--border);
}

.comparison-header .comparison-col{
  font-size:14px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--color-navy);
}

.comparison-icon.bad{
  color:var(--color-steel);
}

.comparison-icon.good{
  color:var(--color-teal);
}

.program-stepper::before{
  background:rgba(0,191,166,0.22);
}

.step-badge{
  background:var(--color-mist);
  border:1px solid rgba(0,191,166,0.22);
  color:var(--color-teal);
}

.insight-card img,
.program-shot img,
.learner-shot img{
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
}

.site-footer{
  background:var(--color-mist);
  color:var(--color-steel);
  border-top:none;
}

.footer-brand,
.footer-left,
.footer-bottom,
.footer-desc-row p,
.footer-hosted,
.footer-mail{
  color:var(--color-steel);
}

.footer-nav a,
.footer-brand a,
.footer-socials a{
  color:var(--color-navy);
}

.footer-nav a:hover,
.footer-brand a:hover,
.footer-socials a:hover,
.footer-mail:hover{
  color:var(--color-teal);
}

.footer-bottom{
  border-top:1px solid var(--border);
}

.linkedin-logo{
  filter:brightness(0) saturate(100%) invert(43%) sepia(14%) saturate(1125%) hue-rotate(171deg) brightness(89%) contrast(86%);
}

.founder-subtitle{
  color:var(--color-slate);
  font-size:14px;
  line-height:1.65;
}

.app-login-body{
  background:var(--color-warm);
}

.app-login-side{
  background:var(--color-navy);
  border-right:1px solid var(--border-dark);
  color:var(--color-white);
}

.app-login-brand{
  align-self:flex-start;
  margin:0 0 8px 0;
}

.app-login-side-title{
  color:var(--color-white);
  font-size:18px;
  line-height:1.7;
  font-weight:500;
}

.app-login-language{
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border-dark);
}

.app-login-language a{
  color:var(--color-slate);
}

.app-login-language a.active{
  background:var(--color-mist);
  color:var(--color-navy);
  box-shadow:none;
}

.chat-timer,
.chat-panel.chat-v2 .chat-stage,
.chat-panel.chat-v2 .chat-status-rail,
.chat-panel.chat-v2 #chat-window,
.chat-panel.chat-v2 .chat-preflight-button.secondary-button,
.chat-panel.chat-v2 .conversation-actions .secondary-button,
.transcript-box{
  background:var(--color-white);
  border:1px solid var(--border);
}

.chat-panel.chat-v2{
  background:var(--color-white);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
}

.chat-panel.chat-v2 .chat-stage{
  background:linear-gradient(180deg, var(--color-warm) 0%, var(--color-mist) 100%);
}

.chat-timer,
.chat-panel.chat-v2 .chat-status-line,
.chat-panel.chat-v2 .chat-status-subline{
  color:var(--color-steel);
}

.chat-timer .timer-value{
  color:var(--color-navy);
}

.status-dot{
  color:var(--color-teal);
}

.speaker-indicator{
  color:var(--color-steel);
}

.speaker-icon{
  background:var(--color-white);
  border:1px solid var(--border);
  color:var(--color-steel);
}

.speaker-name{
  color:var(--color-navy);
  font-size:16px;
  font-weight:500;
}

.mic-indicator.active .speaker-icon{
  color:var(--color-teal);
  background:var(--color-mist);
  border-color:rgba(0,191,166,0.28);
  box-shadow:0 0 0 8px rgba(0,191,166,0.12);
}

.agent-indicator.active .speaker-icon{
  color:var(--color-steel);
  background:rgba(74,111,150,0.1);
  border-color:rgba(74,111,150,0.28);
  box-shadow:0 0 0 8px rgba(74,111,150,0.12);
}

.pace-track{
  background:rgba(22,32,46,0.08);
}

.pace-target-band{
  background:rgba(0,191,166,0.24);
}

.pace-marker{
  background:var(--color-navy);
  border:2px solid var(--color-white);
  box-shadow:0 0 0 1px rgba(22,32,46,0.16);
}

.pace-range-target{
  color:var(--color-slate);
}

.pace-status.is-in-range,
.pace-status.is-slow,
.pace-status.is-fast{
  color:var(--color-navy);
  background:var(--color-mist);
  border-color:rgba(0,191,166,0.22);
}

.message.user .bubble,
.live-transcript-line.user{
  background:var(--color-teal);
  color:var(--color-navy);
  border-color:transparent;
}

.live-transcript-line,
.message.assistant .bubble{
  background:var(--color-white);
  color:var(--color-navy);
}

.chat-panel.chat-v2 .mic-button{
  border:1px solid rgba(22,32,46,0.12);
  background:linear-gradient(180deg, var(--color-white) 0%, var(--color-mist) 100%);
  box-shadow:0 18px 34px rgba(22,32,46,0.16);
}

.chat-panel.chat-v2 .mic-button.listening{
  background:linear-gradient(180deg, var(--color-mist) 0%, rgba(0,191,166,0.14) 100%);
  border-color:rgba(0,191,166,0.36);
}

.chat-panel.chat-v2 .mic-button .mic-label{
  color:var(--color-navy);
  max-width:none;
  line-height:1.2;
  text-align:left;
}

.chat-panel.chat-v2 .conversation-ended{
  background:var(--color-mist);
  border:1px solid rgba(0,191,166,0.22);
  color:var(--color-navy);
}

.data-table th{
  color:var(--color-slate);
  font-size:11px;
  line-height:1;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:600;
}

.data-table td{
  color:var(--color-steel);
}

.table-wrap,
.history-empty{
  color:var(--color-steel);
}

@media (max-width: 900px){
  .marketing-body .hero h1,
  .marketing-body .hero-title-centered,
  .typed-word{
    font-size:48px;
  }

  .marketing-body .section-head h2,
  .marketing-body .how-inner h2,
  .marketing-body .faq-section h2,
  .marketing-body .legal-main > h1{
    font-size:40px;
  }

  .marketing-body .faq-group h3{
    font-size:34px;
  }

  .marketing-body .hero-sub,
  .marketing-body .section-sub,
  .marketing-body .how-sub,
  .marketing-body .intro-text,
  .marketing-body .legal-section p,
  .marketing-body .legal-section li,
  .marketing-body .audience-card p,
  .marketing-body .feature-card p,
  .marketing-body .insight-card p,
  .marketing-body .demo-cta p{
    font-size:16px;
  }
}

/* Final landing-page contrast fixes for light sections */
.marketing-body .how-inner .how-sub,
.marketing-body .problem-section .section-sub,
.marketing-body .learner-experience-section .section-sub,
.marketing-body .audience-section .section-sub,
.marketing-body .audience-card p,
.marketing-body .comparison-section .section-sub,
.marketing-body .insight-card p{
  color:var(--color-steel);
}

.marketing-body .insight-card h3{
  color:var(--color-navy);
}

/* Final contrast fixes for the light demo page */
.marketing-body.demo-page .intro-text,
.marketing-body.demo-page .feature-card p{
  color:var(--color-steel);
}

.marketing-body.demo-page .feature-card h3{
  color:var(--color-navy);
}

/* Final legal/about contrast guard: these pages use light backgrounds with marketing-body. */
.marketing-body.demo-page .legal-main,
.marketing-body.demo-page .legal-section,
.marketing-body.demo-page .legal-section p,
.marketing-body.demo-page .legal-section li,
.marketing-body.demo-page .legal-section ul,
.marketing-body.demo-page .founder-subtitle{
  color:var(--color-steel) !important;
}

.marketing-body.demo-page .legal-main h1,
.marketing-body.demo-page .legal-section h2,
.marketing-body.demo-page .legal-section h3,
.marketing-body.demo-page .legal-section strong{
  color:var(--color-navy) !important;
}