/* ── Design tokens ── */
:root {
  /* Brand palette — royal blue + deep navy + orange accent + green (proctur-style) */
  --primary:        #1471D8;
  --primary-dark:   #0F57AB;
  --primary-light:  #EAF2FD;
  --navy:           #08245E;
  --navy-2:         #0E4FA6;
  --accent:         #F5821F;   /* orange accent — badges, secondary CTAs */
  --accent-dark:    #DA6E0F;
  --brand-cyan:     #1471D8;
  --brand-violet:   #1471D8;
  --brand-grad:     linear-gradient(100deg, #1471D8 0%, #0E4FA6 100%);
  --brand-grad-soft:linear-gradient(135deg, #1A73E8 0%, #1471D8 100%);
  --green:          #10B981;
  --green-light:    #ECFDF5;
  --green-text:     #065F46;
  --amber:          #F59E0B;
  --amber-light:    #FFFBEB;
  --amber-text:     #92400E;
  --red:            #EF4444;
  --red-light:      #FEF2F2;
  --red-text:       #991B1B;
  --bg:             #F4F5FF;
  --card:           #FFFFFF;
  --text:           #111827;
  --text-2:         #6B7280;
  --border:         #E5E7EB;
  --radius:         16px;
  --shadow:         0 1px 4px rgba(0,0,0,0.06), 0 8px 28px rgba(37,99,235,0.10);
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Header ── */

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; object-fit: cover; object-position: left center; }

.logo-wordmark {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--text);
}

.logo-wordmark em {
  font-style: normal;
  color: var(--primary);
}

.header-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  padding: 0.25rem 0.7rem;
  border-radius: 20px;
  letter-spacing: 0.02em;
}

/* ── Main layout ── */

main {
  max-width: 740px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 5rem;
}

/* ── Screens ── */

.screen { display: none; }

.screen.active {
  display: block;
  animation: fadeUp 0.22s ease both;
}

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

/* ── Cards ── */

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.5rem;
}

.card-wide  { max-width: 100%; }
.card-center { text-align: center; padding: 5rem 2rem; }

.card-heading {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1.75rem;
}

/* ── Landing page ── */

.lp-hero {
  background: linear-gradient(135deg, #1E1B4B 0%, #312E81 45%, #1D4ED8 100%);
  border-radius: var(--radius);
  padding: 3.5rem 2.5rem 2.5rem;
  margin-bottom: 1.75rem;
  color: #fff;
}

.lp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1D4ED8;
  background: rgba(99,102,241,0.1);
  border: 1px solid rgba(99,102,241,0.25);
  padding: 0.28rem 0.8rem;
  border-radius: 20px;
  margin-bottom: 1.25rem;
}

.lp-title {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 1rem;
}

.lp-accent { color: #A5B4FC; }

.lp-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: 2rem;
}

.lp-cta-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.lp-cta-btn {
  font-size: 1rem;
  font-weight: 700;
  padding: 0.85rem 2rem;
  background: #fff;
  color: var(--primary);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.lp-cta-btn:hover { background: #EEF2FF; transform: translateY(-1px); }

.lp-cta-note {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
}

.lp-feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.lp-fpill {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
}

/* Stats row */
.lp-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem 1rem;
  margin-bottom: 1.75rem;
}

.lp-stat {
  flex: 1;
  text-align: center;
}

.lp-stat-n {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.5px;
  line-height: 1;
  margin-bottom: 0.2rem;
}

.lp-stat-l {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lp-stat-sep {
  width: 1px;
  height: 36px;
  background: var(--border);
  flex-shrink: 0;
}

/* How it works */
.lp-how {
  margin-bottom: 1.75rem;
}

.lp-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-2);
  margin-bottom: 1rem;
}

.lp-steps {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.lp-step {
  flex: 1;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
}

.lp-step-n {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.lp-step-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.lp-step-body {
  font-size: 0.83rem;
  color: var(--text-2);
  line-height: 1.6;
}

.lp-step-arrow {
  color: var(--text-2);
  font-size: 1.2rem;
  margin-top: 1.5rem;
  flex-shrink: 0;
}

/* Roles grid */
.lp-roles-section { margin-bottom: 1.75rem; }

.lp-roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.6rem;
}

.lp-role-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.lp-role-card:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.lp-role-card.selected { border-color: var(--primary); background: var(--primary); color: #fff; }

/* Start card */
.lp-start-card { margin-bottom: 1rem; }

/* ── Forms ── */

.form-group { margin-bottom: 1.5rem; }

.form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-2);
  margin-bottom: 0.45rem;
}

select, textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 0.975rem;
  color: var(--text);
  background: #fff;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  -webkit-appearance: none;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.11);
}

textarea {
  resize: vertical;
  line-height: 1.75;
  min-height: 170px;
}

.form-footnote {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-2);
  margin-top: 0.85rem;
}

/* ── Buttons ── */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 1.5rem;
  border: none;
  border-radius: 10px;
  font-size: 0.975rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.1px;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s, opacity 0.15s;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover:not(:disabled) {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(79,70,229,0.32);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border: 1.5px solid var(--border);
  margin-top: 0.75rem;
}
.btn-ghost:hover { background: var(--bg); color: var(--text); border-color: #D1D5DB; }

/* Loading spinner inside button */
.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ── AI Interviewer Avatar ── */

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem 0 1rem;
}

.avatar-outer {
  position: relative;
  width: 170px;
  height: 210px;
  margin-bottom: 0.85rem;
}

.avatar-face {
  width: 170px;
  height: 210px;
  border-radius: 20px;
  overflow: hidden;
  border: 2.5px solid #C7D2FE;
  box-shadow: 0 6px 28px rgba(79,70,229,0.15);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.avatar-face svg { width: 100%; height: 100%; display: block; }

/* Speaking: glowing border instead of pulse ring */
.avatar-section.speaking .avatar-face {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.3), 0 8px 32px rgba(79,70,229,0.25);
}

/* Eyelid blink */
.av-eyelid {
  transform-box: fill-box;
  transform-origin: center top;
  transform: scaleY(0);
  animation: av-blink 5s ease-in-out infinite;
}
#eyelid-right { animation-delay: 0.06s; }

@keyframes av-blink {
  0%, 88%, 100% { transform: scaleY(0); }
  92%            { transform: scaleY(1); }
  96%            { transform: scaleY(0); }
}

/* Subtle breathing idle animation */
#interviewer-avatar {
  animation: av-breathe 4.5s ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes av-breathe {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-2px); }
}

.avatar-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-2);
  margin-bottom: 0.65rem;
}

/* Sound bars visualiser */
.sound-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 22px;
}

.sound-bar {
  width: 4px;
  height: 4px;
  background: var(--primary);
  border-radius: 3px;
  opacity: 0.25;
  transition: opacity 0.2s;
}

.avatar-section.speaking ~ .panel-label-bar .sound-bar { opacity: 1; }
.avatar-section.speaking ~ .panel-label-bar .sound-bar:nth-child(1) { animation: bar-sm 0.75s ease-in-out infinite 0s; }
.avatar-section.speaking ~ .panel-label-bar .sound-bar:nth-child(2) { animation: bar-sm 0.75s ease-in-out infinite 0.12s; }
.avatar-section.speaking ~ .panel-label-bar .sound-bar:nth-child(3) { animation: bar-sm 0.75s ease-in-out infinite 0.24s; }
.avatar-section.speaking ~ .panel-label-bar .sound-bar:nth-child(4) { animation: bar-sm 0.75s ease-in-out infinite 0.12s; }
.avatar-section.speaking ~ .panel-label-bar .sound-bar:nth-child(5) { animation: bar-sm 0.75s ease-in-out infinite 0.06s; }

@keyframes bar {
  0%,100% { height: 4px; }
  50%      { height: 20px; }
}

/* Question speech bubble */
.question-bubble {
  background: var(--primary-light);
  border-radius: 0 18px 18px 18px;
  padding: 1.1rem 1.4rem;
  margin-bottom: 1.75rem;
  position: relative;
  min-height: 64px;
}
.replay-question-btn {
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #fff;
  border: 1.5px solid var(--primary, #6366f1);
  color: var(--primary, #6366f1);
  font-weight: 700;
  font-size: 0.82rem;
  font-family: inherit;
  padding: 0.4rem 0.85rem;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.replay-question-btn:hover { background: var(--primary, #6366f1); color: #fff; }

.question-bubble::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 32px;
  border: 11px solid transparent;
  border-bottom-color: var(--primary-light);
  border-top: 0;
}

.question-text {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.75;
  color: var(--text);
  min-height: 1.75em;
}

/* Shake: nudge user to answer before proceeding */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
.question-bubble.shake { animation: shake 0.45s ease; }

/* Blinking cursor while text is being revealed */
.question-text.revealing::after {
  content: '▋';
  color: var(--primary);
  font-weight: 400;
  margin-left: 2px;
  animation: cursor-blink 0.9s step-end infinite;
}

@keyframes cursor-blink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* Answer area */
.answer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45rem;
}

.answer-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-2);
}

.answer-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 0.975rem;
  color: var(--text);
  background: #fff;
  font-family: inherit;
  resize: vertical;
  line-height: 1.75;
  min-height: 130px;
  transition: border-color 0.15s, box-shadow 0.15s, opacity 0.2s;
}

.answer-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.11);
}

.answer-textarea:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--bg);
}

/* Mute toggle button */
.tts-toggle {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tts-toggle:hover    { background: var(--bg); color: var(--text); }
.tts-toggle.active   { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.tts-toggle.muted    { border-color: var(--border); color: var(--text-2); background: transparent; }

/* top-row-right: counter + mute side by side */
.top-row-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── Interview card ── */

.interview-card {
  padding: 0;
  overflow: hidden;
  /* Break out of 740px main constraint */
  width: min(960px, calc(100vw - 2rem));
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Interview grid: left AI panel (full height) + right column */
.interview-grid {
  display: grid;
  grid-template-columns: 40% 60%;
}

/* AI panel — full height left column */
.ai-panel {
  background: linear-gradient(160deg, #EEF2FF 0%, #C7D2FE 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  border-right: 1px solid rgba(79,70,229,0.15);
  min-height: 480px;
  padding: 2rem 1rem 2.75rem;
}

.ai-panel .avatar-section { padding: 0; flex: 1; justify-content: center; }

.ai-panel .avatar-outer,
.ai-panel .avatar-face { width: 200px; height: 246px; }

/* Right column */
.interview-right {
  display: flex;
  flex-direction: column;
}

/* Candidate panel — small tile at top of right column */
.candidate-panel {
  background: #0F0F1A;
  position: relative;
  overflow: hidden;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.candidate-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  display: none;
}

.candidate-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.placeholder-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
}

.btn-cam-enable {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.45rem 1.25rem;
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-cam-enable:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-color: rgba(255,255,255,0.5);
}

/* Panel label bars */
.panel-label-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  height: 36px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.ai-label-bar {
  background: rgba(79,70,229,0.08);
  border-top: 1px solid rgba(79,70,229,0.15);
}

.candidate-label-bar {
  background: rgba(0,0,0,0.35);
  border-top: 1px solid rgba(255,255,255,0.07);
}

.panel-label-text {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.ai-label-bar .panel-label-text { color: var(--primary); }
.candidate-label-bar .panel-label-text { color: rgba(255,255,255,0.45); }

/* Sound bars inside label bar */
.ai-label-bar .sound-bars { height: 22px; margin: 0; }
.ai-label-bar .sound-bar { width: 4px; height: 4px; background: var(--primary); }
@keyframes bar-sm {
  0%,100% { height: 4px; }
  50%      { height: 18px; }
}

/* Self-view dot inside candidate panel */
.candidate-panel .self-view-dot {
  position: absolute;
  top: 8px;
  right: 8px;
}

/* Mobile: stack grid vertically */
@media (max-width: 640px) {
  .interview-grid { grid-template-columns: 1fr; }
  .ai-panel { min-height: 200px; border-right: none; border-bottom: 1px solid rgba(79,70,229,0.15); padding-bottom: 2.75rem; }
  .ai-panel .avatar-outer, .ai-panel .avatar-face { width: 150px; height: 184px; }
  .candidate-panel { height: 130px; }
  .lp-hero { padding: 2.5rem 1.5rem 2rem; }
  .lp-title { font-size: 2rem; }
  .lp-steps { flex-direction: column; }
  .lp-step-arrow { display: none; }
  .lp-stats { flex-wrap: wrap; gap: 1rem; }
  .lp-stat-sep { display: none; }
  .lp-cta-row { flex-direction: column; align-items: flex-start; }
}

/* ── Voice answer area ── */

.voice-answer-area {
  margin-top: 0.75rem;
}

/* Transcript display */
.voice-transcript-wrap {
  background: #F9FAFB;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  margin-bottom: 0.75rem;
}

.voice-transcript-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.voice-transcript-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-2);
}

.btn-rerecord {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  border: none;
  border-radius: 6px;
  padding: 0.25rem 0.65rem;
  cursor: pointer;
}

.voice-transcript-text {
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.65;
  min-height: 40px;
}

/* Record button */
.record-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
}

.btn-record {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.85rem 1.25rem;
  background: var(--primary-light);
  border: 2px solid var(--primary);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--primary);
  font-family: inherit;
}
.btn-record:disabled { opacity: 0.45; cursor: not-allowed; border-color: var(--border); background: var(--bg); color: var(--text-2); }
.btn-record:not(:disabled):hover { background: var(--primary); color: #fff; }
.btn-record.recording { background: #FEF2F2; border-color: #EF4444; color: #DC2626; animation: record-pulse 1.5s ease-in-out infinite; }

@keyframes record-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); }
  50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

.record-ring {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.15;
  transition: opacity 0.15s;
}
.btn-record:not(:disabled) .record-ring { opacity: 1; background: transparent; border: 2px solid currentColor; }
.btn-record.recording .record-ring { background: #EF4444; border-color: #EF4444; opacity: 1; }
.btn-record.recording .record-ring svg { stroke: #fff; }

#record-label {
  font-size: 0.92rem;
  font-weight: 600;
}

/* Type fallback */
.type-fallback { margin-bottom: 0.5rem; }

/* Answer footer row */
.answer-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
}

.btn-type-toggle {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0;
  transition: color 0.15s;
}
.btn-type-toggle:hover { color: var(--primary); }

.answer-footer-right { display: flex; align-items: center; gap: 0.5rem; }

.progress-track {
  height: 4px;
  background: var(--border);
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, var(--primary), #5EA8FF);
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0 4px 4px 0;
}

.interview-body { padding: 1.1rem 1.4rem 1.4rem; flex: 1; overflow-y: auto; }

.interview-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.interview-meta {
  font-size: 0.85rem;
  color: var(--text-2);
  font-weight: 500;
}

.q-badge {
  font-size: 0.775rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  padding: 0.28rem 0.8rem;
  border-radius: 20px;
}

.question-text {
  font-size: 1.175rem;
  font-weight: 600;
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 1.75rem;
}

/* ── Generating screen ── */

.spinner {
  width: 52px;
  height: 52px;
  border: 4px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
  margin: 0 auto 1.75rem;
}

@keyframes spin { to { transform: rotate(360deg); } }

.gen-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.6rem;
}

.gen-sub {
  font-size: 0.925rem;
  color: var(--text-2);
  line-height: 1.75;
}

/* ── Report ── */

.report-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2.25rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}

.report-role-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}

.report-banner-title {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--text);
}

/* Score ring */

.score-ring-wrap {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}

.score-arc {
  transition: stroke-dashoffset 1.3s cubic-bezier(0.34, 1.2, 0.64, 1),
              stroke 0.3s ease;
}

.score-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.score-num {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  transition: color 0.3s ease;
}

.score-denom {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-2);
  align-self: flex-end;
  margin-bottom: 3px;
}

/* Report two-column grid */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.report-section { margin-bottom: 2.25rem; }

.section-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-2);
  margin-bottom: 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1.5px solid var(--border);
}

.label-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.green-dot  { background: var(--green); }
.amber-dot  { background: var(--amber); }

.feedback-list {
  padding-left: 1.1rem;
  list-style: none;
}

.feedback-list li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.65rem;
  font-size: 0.925rem;
  line-height: 1.65;
}

.feedback-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.strengths-list li     { color: var(--green-text); }
.strengths-list li::before  { background: var(--green); }

.improvements-list li  { color: var(--amber-text); }
.improvements-list li::before { background: var(--amber); }

/* Next steps callout */

.next-steps-text {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text);
  background: var(--primary-light);
  border-left: 4px solid var(--primary);
  border-radius: 0 10px 10px 0;
  padding: 1.1rem 1.4rem;
}

/* ── Per-question cards ── */

.qcard {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.35rem 1.5rem;
  margin-bottom: 1rem;
  background: #fff;
  transition: box-shadow 0.15s;
}

.qcard:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }

.qcard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.7rem;
}

.qcard-num {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-2);
}

.qcard-score {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
}

.qcard-score.high { background: var(--green-light); color: var(--green-text); }
.qcard-score.mid  { background: var(--primary-light); color: var(--primary-dark); }
.qcard-score.low  { background: var(--red-light); color: var(--red-text); }

.qcard-question {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 0.65rem;
}

.qcard-answer {
  font-size: 0.875rem;
  color: var(--text-2);
  line-height: 1.65;
  background: var(--bg);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.75rem;
}

.qcard-assessment {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.7;
  border-left: 3px solid var(--primary);
  padding-left: 0.85rem;
  font-style: italic;
}

/* ── Mobile ── */

@media (max-width: 620px) {
  main { padding: 1.25rem 0.875rem 4rem; }

  .card { padding: 1.75rem 1.25rem; }
  .interview-body { padding: 1.5rem 1.25rem 1.75rem; }

  .hero { padding: 2rem 0 2rem; }
  .hero-title { font-size: 2rem; letter-spacing: -0.8px; }
  .hero-sub { font-size: 0.95rem; }

  .two-col { grid-template-columns: 1fr; gap: 0; }

  .report-banner { flex-direction: column-reverse; align-items: flex-start; }
  .report-banner-title { font-size: 1.5rem; }

  .qcard { padding: 1.1rem; }
}

/* ── Inputs (auth forms) ── */

input[type="email"],
input[type="password"],
input[type="text"] {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 0.975rem;
  color: var(--text);
  background: #fff;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.11);
}

/* ── Header auth area ── */

.header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-user {
  font-size: 0.8rem;
  color: var(--text-2);
  font-weight: 500;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-header {
  padding: 0.4rem 1rem;
  border-radius: 8px;
  font-size: 0.825rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.btn-header:hover { background: var(--bg); }

.btn-header-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.btn-header-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* ── Auth modal ── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-box {
  background: #fff;
  border-radius: var(--radius);
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  animation: fadeUp 0.2s ease both;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--text-2);
  cursor: pointer;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}

.modal-close:hover { background: var(--bg); color: var(--text); }

/* Generic modal card (enquiry, etc.) + base text input */
.modal-card {
  background: #fff; border-radius: var(--radius); padding: 2rem 1.75rem;
  width: 100%; max-width: 440px; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18); animation: fadeUp 0.2s ease both;
  max-height: 92vh; overflow-y: auto;
}
.text-input {
  width: 100%; box-sizing: border-box; padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--border); border-radius: 10px;
  font-size: 0.95rem; font-family: inherit; color: var(--text); background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.text-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(20,113,216,0.12); }
textarea.text-input { resize: vertical; min-height: 96px; }

.modal-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.4px;
  margin-bottom: 0.35rem;
}

.modal-sub {
  font-size: 0.875rem;
  color: var(--text-2);
  margin-bottom: 1.75rem;
  line-height: 1.6;
}

.auth-error {
  font-size: 0.85rem;
  color: var(--red-text);
  background: var(--red-light);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
}

.auth-switch {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-2);
  margin-top: 1rem;
}

.auth-or {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0.9rem 0; color: var(--text-2); font-size: 0.78rem;
}
.auth-or::before, .auth-or::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.otp-input {
  letter-spacing: 0.35em;
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.auth-switch a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.auth-switch a:hover { text-decoration: underline; }

/* ── History screen ── */

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.history-empty {
  text-align: center;
  color: var(--text-2);
  padding: 3rem 1rem;
  font-size: 0.95rem;
  line-height: 1.7;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 0.75rem;
  background: #fff;
  transition: box-shadow 0.15s;
}

.history-item:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.history-item-pending { border-color: #F59E0B; background: #FFFBEB; }
.history-item-pending:hover { box-shadow: 0 2px 12px rgba(245,158,11,0.18); border-color: #D97706; }

.history-score {
  font-size: 1.3rem;
  font-weight: 800;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  flex-shrink: 0;
}

.history-score.high { background: var(--green-light); color: var(--green-text); }
.history-score.mid  { background: var(--primary-light); color: var(--primary-dark); }
.history-score.low  { background: var(--red-light); color: var(--red-text); }

.history-info { flex: 1; min-width: 0; }

.history-role {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-round {
  font-size: 0.8rem;
  color: var(--text-2);
  margin-top: 0.15rem;
}

.history-date {
  font-size: 0.78rem;
  color: var(--text-2);
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 620px) {
  /* Dashboard header: keep logo fixed left; let the auth buttons wrap on the
     right so nothing is clipped. Header grows in height instead of overflowing. */
  .header-inner { height: auto; min-height: 56px; padding: 0.5rem 0.9rem; align-items: center; }
  .header-right { flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; }
  #header-auth, #header-guest { flex-wrap: wrap !important; justify-content: flex-end; gap: 0.4rem !important; }
  .header-user { display: none; }
  .btn-header { padding: 0.4rem 0.7rem; font-size: 0.78rem; }
  .modal-box { padding: 1.75rem 1.25rem; }
  .avatar-outer { width: 130px; height: 162px; }
  .avatar-face  { width: 130px; height: 162px; border-radius: 14px; }
  .question-bubble { padding: 0.9rem 1.1rem; }
  .question-text { font-size: 1rem; }
}

/* ── Rounds preview (select screen) ── */

.rounds-preview {
  margin-bottom: 1.25rem;
}

.rounds-preview-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  background: var(--primary-light);
  border-radius: 10px;
  padding: 0.75rem 1rem;
}

.rounds-preview-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-right: 0.25rem;
}

.rounds-pill {
  font-size: 0.8rem;
  font-weight: 600;
  background: #fff;
  color: var(--primary-dark);
  border: 1.5px solid var(--primary);
  border-radius: 20px;
  padding: 0.25rem 0.75rem;
}

.rounds-arrow {
  color: var(--primary);
  font-weight: 700;
  font-size: 1rem;
}

/* ── Round-complete screen ── */

.round-complete-icon {
  margin-bottom: 1.25rem;
  display: flex;
  justify-content: center;
}

.round-complete-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
  text-align: center;
  margin-bottom: 0.5rem;
}

.round-complete-sub {
  font-size: 1rem;
  color: var(--text-2);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 0.35rem;
}

.round-complete-hint {
  font-size: 0.875rem;
  color: var(--text-2);
  text-align: center;
  line-height: 1.6;
  max-width: 360px;
  margin: 0 auto;
}

/* ── Payment screen ── */

.payment-lock-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.payment-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
  text-align: center;
  margin-bottom: 0.65rem;
}

.payment-sub {
  font-size: 0.925rem;
  color: var(--text-2);
  text-align: center;
  line-height: 1.7;
  max-width: 380px;
  margin: 0 auto 1.75rem;
}

.payment-price-box {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.15rem;
  margin-bottom: 0.75rem;
}
.payment-orig {
  font-size: 1.4rem; font-weight: 600; color: var(--text-2);
  text-decoration: line-through; margin-right: 0.6rem; align-self: center;
}
.payment-discount-note {
  text-align: center; font-size: 0.85rem; font-weight: 600;
  color: #059669; margin-bottom: 1.25rem;
}
.payment-coupon {
  display: flex; gap: 0.5rem; max-width: 320px; margin: 0 auto 0.5rem;
}
.payment-coupon input {
  flex: 1; padding: 0.6rem 0.85rem; border: 1.5px solid var(--border);
  border-radius: 10px; font-size: 0.9rem; font-family: inherit; outline: none;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.payment-coupon input:focus { border-color: var(--primary); }
.payment-coupon button {
  padding: 0.6rem 1.1rem; border: 1.5px solid var(--primary); background: #fff;
  color: var(--primary); border-radius: 10px; font-size: 0.88rem; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: all 0.15s; white-space: nowrap;
}
.payment-coupon button:hover { background: var(--primary); color: #fff; }
.payment-coupon-msg { text-align: center; font-size: 0.82rem; margin-bottom: 1.25rem; }

.payment-currency {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

.payment-amount {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -2px;
  line-height: 1;
}

.payment-btn {
  max-width: 280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.payment-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.775rem;
  color: var(--text-2);
  margin-top: 0.9rem;
}

/* ── Report: round section headers ── */

.round-section-header {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  margin: 1.5rem 0 0.75rem;
  display: inline-block;
}

.round-section-header:first-child { margin-top: 0.25rem; }

/* ── History: payment status badges ── */

.history-paid-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--green-light);
  color: var(--green-text);
  border-radius: 10px;
  padding: 0.1rem 0.5rem;
  vertical-align: middle;
  margin-left: 0.35rem;
}

.history-pending-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  background: #FEF3C7;
  color: #92400E;
  border-radius: 10px;
  padding: 0.1rem 0.5rem;
  vertical-align: middle;
  margin-left: 0.35rem;
}

/* ── Onboarding screen ── */
.onboard-card { max-width: 540px; margin: 0 auto; }

.onboard-ai-header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}

.onboard-ai-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1471D8 0%, #1471D8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(79,70,229,0.15);
  animation: onboard-pulse 2.5s ease-in-out infinite;
}

@keyframes onboard-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(79,70,229,0.15); }
  50%       { box-shadow: 0 0 0 8px rgba(79,70,229,0.08); }
}

.onboard-ai-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}

.onboard-ai-status {
  font-size: 0.78rem;
  color: #10B981;
  font-weight: 500;
  margin-top: 0.1rem;
}

.onboard-bubble {
  background: #F5F3FF;
  border: 1px solid #DDD6FE;
  border-radius: 0 1rem 1rem 1rem;
  padding: 1rem 1.25rem;
  min-height: 72px;
  margin-bottom: 1.25rem;
  position: relative;
}

.onboard-bubble::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -10px;
  width: 0;
  height: 0;
  border-right: 10px solid #DDD6FE;
  border-top: 10px solid transparent;
}

.onboard-bubble::after {
  content: '';
  position: absolute;
  top: 0px;
  left: -8px;
  width: 0;
  height: 0;
  border-right: 9px solid #F5F3FF;
  border-top: 9px solid transparent;
}

.onboard-question-text {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
  margin: 0;
}

.onboard-dots {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.onboard-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E5E7EB;
  transition: background 0.3s;
}

.onboard-dot.active { background: #1471D8; }
.onboard-dot.done   { background: #10B981; }

.onboard-step-label {
  font-size: 0.78rem;
  color: var(--text-2);
  margin: 0 0 0.25rem;
}

/* Onboard role/round card selectors */
.onboard-select-wrap { margin-top: 0.75rem; }

.onboard-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.5rem;
}

.onboard-role-card {
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--bg);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-1);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  line-height: 1.3;
}

.onboard-role-card:hover {
  border-color: #A5B4FC;
  background: #F5F3FF;
  color: #1D4ED8;
}

.onboard-role-card.selected {
  border-color: #1471D8;
  background: #EEF2FF;
  color: #3730A3;
  font-weight: 600;
}

.onboard-round-wrap {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.onboard-round-btn {
  flex: 1;
  min-width: 140px;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--bg);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-1);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  text-align: center;
}

.onboard-round-btn:hover {
  border-color: #A5B4FC;
  background: #F5F3FF;
  color: #1D4ED8;
}

.onboard-round-btn.selected {
  border-color: #1471D8;
  background: #EEF2FF;
  color: #3730A3;
  font-weight: 600;
}

/* ── Mic button ── */
.mic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}

.mic-btn:hover {
  background: #F5F3FF;
  color: #1471D8;
  border-color: #A5B4FC;
}

.mic-btn.recording {
  background: #FEF2F2;
  color: #EF4444;
  border-color: #FCA5A5;
  animation: mic-pulse 1.2s ease-in-out infinite;
}

@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); }
  50%       { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* ── Mic status bar ── */
.mic-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: #EF4444;
  font-weight: 500;
  padding: 0.4rem 0;
}

.mic-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #EF4444;
  animation: mic-dot-pulse 1s ease-in-out infinite;
}

@keyframes mic-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

/* ── Footer ── */
.site-footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 1.25rem 1.5rem;
  margin-top: 3rem;
}

.footer-inner {
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.footer-brand {
  font-size: 0.8rem;
  color: var(--text-2);
  font-weight: 500;
}

.footer-links {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.footer-links a {
  font-size: 0.8rem;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-links a:hover { color: var(--primary); }

@media (max-width: 480px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-links { gap: 0.75rem; }
}

/* ── Camera button ── */
.camera-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-2);
  transition: all 0.15s;
  flex-shrink: 0;
}
.camera-btn:hover { border-color: var(--primary); color: var(--primary); }
.camera-btn.active { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }

/* ── Self-view dot (inside candidate panel) ── */
.self-view-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6B7280;
  border: 1.5px solid rgba(255,255,255,0.7);
  transition: background 0.3s;
}

/* ── Delivery card in report ── */
:root { --blue: #3B82F6; --blue-light: #EFF6FF; --blue-text: #1E40AF; }
.label-blue { color: var(--blue-text); }
.blue-dot { background: var(--blue); }
.delivery-card { background: var(--blue-light); border-radius: 12px; padding: 1.25rem; }
.delivery-metrics { margin-bottom: 0.75rem; }
.delivery-metric { margin-bottom: 0.75rem; }
.delivery-metric-label { font-size: 0.8rem; font-weight: 600; color: var(--blue-text); display: block; margin-bottom: 0.35rem; text-transform: uppercase; letter-spacing: 0.04em; }
.delivery-bar-wrap { background: #DBEAFE; border-radius: 99px; height: 10px; margin-bottom: 0.25rem; overflow: hidden; }
.delivery-bar-fill { height: 100%; background: var(--blue); border-radius: 99px; transition: width 1s ease; width: 0; }
.delivery-pct { font-size: 1.1rem; font-weight: 700; color: var(--blue-text); }
.delivery-score-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.25rem; }
.delivery-score-label { font-size: 0.85rem; color: var(--text-2); }
.delivery-score-value { font-size: 1rem; font-weight: 700; color: var(--blue-text); }
.delivery-insight { font-size: 0.875rem; color: #1E40AF; margin: 0; line-height: 1.6; }

/* ── Legal page shared styles ── */
.legal-body {
  font-family: 'Inter', sans-serif;
  background: #F9FAFB;
  color: #111827;
  margin: 0;
  padding: 0;
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════
   FULL PROFESSIONAL LANDING PAGE
═══════════════════════════════════════════════════════════ */

/* overflow-x:clip prevents horizontal scroll WITHOUT breaking position:sticky
   (overflow-x:hidden turns the root into a scroll container and kills sticky). */
html { scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }

body.lp-active main    { max-width: 100%; padding: 0; margin: 0; }
body.lp-active .site-header { display: none; }
body.lp-active .site-footer { display: none; }

/* ── Landing Nav ── */
.lp-nav {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.07);
  position: sticky;
  top: 0;
  z-index: 100;
}
.lp-nav-inner {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.lp-nav-logo { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; cursor: pointer; }
.lp-nav-links {
  display: flex; align-items: center; gap: 0.1rem;
  list-style: none; margin: 0 auto; padding: 0;
}
.lp-nav-links a {
  font-size: 0.86rem; font-weight: 500; color: var(--text-2);
  text-decoration: none; padding: 0.4rem 0.7rem; border-radius: 8px;
  transition: color 0.15s, background 0.15s; white-space: nowrap;
}
/* Keep the email from eating nav width on the landing bar */
.lp-nav-user-email-disp { display: none; }
.lp-nav-links a:hover { color: var(--primary); background: var(--primary-light); }

/* Guides dropdown */
.lp-nav-dropdown { position: relative; }
.lp-nav-dropdown > a { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.lp-nav-dropdown > a::after { content: '▾'; font-size: .7rem; opacity: .6; }
.lp-nav-dropdown-menu {
  display: flex; flex-direction: column; gap: 2px;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12); padding: 8px; padding-top: 16px; min-width: 260px; z-index: 200;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .15s, visibility .15s;
}
.lp-nav-dropdown:hover .lp-nav-dropdown-menu,
.lp-nav-dropdown:focus-within .lp-nav-dropdown-menu {
  visibility: visible; opacity: 1; pointer-events: auto;
}
.lp-nav-dropdown-menu a {
  display: block; padding: 10px 14px; border-radius: 8px; font-size: .85rem;
  color: var(--text); text-decoration: none; font-weight: 500;
  transition: background .15s, color .15s;
}
.lp-nav-dropdown-menu a:hover { background: var(--primary-light); color: var(--primary); }
.lp-nav-dropdown-menu a span { display: block; font-size: .75rem; color: var(--text-2); font-weight: 400; margin-top: 2px; }

.lp-nav-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
/* Mobile hamburger (hidden on desktop). Collapse wrapper is transparent on
   desktop so links + actions lay out exactly as before. */
.lp-nav-burger { display: none; background: none; border: none; cursor: pointer; color: var(--text); padding: 0.35rem; border-radius: 8px; }
.lp-nav-burger svg { width: 26px; height: 26px; display: block; }
.lp-nav-collapse { display: contents; }
/* Always-visible dual CTAs (both products) — both orange */
.lp-nav-cta-group { display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0; }
.lp-nav-signin {
  font-size: 0.875rem; font-weight: 600; color: var(--text);
  background: none; border: 1.5px solid var(--border); border-radius: 8px;
  padding: 0.45rem 1.1rem; cursor: pointer; font-family: inherit;
  transition: all 0.15s; white-space: nowrap;
}
.lp-nav-signin:hover { border-color: var(--primary); color: var(--primary); }
.lp-nav-cta {
  font-size: 0.875rem; font-weight: 700; color: #fff; background: var(--accent);
  border: none; border-radius: 8px; padding: 0.5rem 1.25rem; cursor: pointer;
  font-family: inherit; transition: all 0.15s; white-space: nowrap;
}
.lp-nav-cta:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(245,130,31,0.4); }
.lp-nav-my-int, .lp-nav-signout {
  font-size: 0.825rem; font-weight: 500; color: var(--text-2); background: none;
  border: 1.5px solid var(--border); border-radius: 8px; padding: 0.4rem 0.9rem;
  cursor: pointer; font-family: inherit; transition: all 0.15s; white-space: nowrap;
}
.lp-nav-my-int:hover { color: var(--primary); border-color: var(--primary); }
.lp-nav-signout:hover { color: var(--red-text); border-color: var(--red); }
.lp-nav-user-email-disp {
  font-size: 0.78rem; color: var(--text-2); max-width: 140px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Hero section (deep navy, proctur-style) ── */
.lp-hero-section {
  min-height: 600px; background-size: cover !important; background-position: center !important; background-attachment: fixed;
  padding: 0; position: relative; overflow: hidden; color: #fff; display: flex; align-items: center; justify-content: center;
}
.lp-hero-section::before { display: none; }
.lp-hero-overlay {
  position: absolute; inset: 0; background: linear-gradient(135deg, rgba(8,36,94,0.65) 0%, rgba(8,36,94,0.5) 100%); z-index: 0;
}
.lp-hero-overlay-content { position: relative; z-index: 1; width: 100%; }
.lp-hero-inner {
  position: relative; z-index: 1; max-width: clamp(1200px, 88vw, 1600px); margin: 0 auto; padding: 4.75rem 2rem 5rem;
  display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; width: 100%;
}
.lp-hero-copy { color: #fff; text-align: left; }
.lp-badge-accent {
  display: inline-block; background: rgba(245,130,31,0.16); border: 1px solid rgba(245,130,31,0.5);
  color: #FBBF77; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em;
  padding: 0.4rem 0.95rem; border-radius: 20px;
}
.lp-hero-title {
  font-size: 3.4rem; font-weight: 800; letter-spacing: -1.4px;
  line-height: 1.08; color: #fff; margin: 1.25rem 0 1.1rem; max-width: 600px;
}
.lp-hero-accent { color: #5EA8FF; -webkit-text-fill-color: #5EA8FF; }
.lp-hero-glow {
  position: absolute; z-index: 0; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(94,168,255,0.4), rgba(20,113,216,0.15) 55%, transparent 72%);
  filter: blur(16px); top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.lp-hero-sub { font-size: 1.08rem; color: rgba(255,255,255,0.82); line-height: 1.7; max-width: 480px; margin-bottom: 1.75rem; }
.lp-hero-sub strong { color: #fff; }
.lp-hero-cta-row { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.lp-btn-hero-primary {
  font-size: 1.02rem; font-weight: 700; color: #fff;
  background: var(--accent); border: none; border-radius: 12px; padding: 0.95rem 2rem;
  cursor: pointer; font-family: inherit; box-shadow: 0 12px 30px -10px rgba(245,130,31,0.7);
  transition: all 0.18s; white-space: nowrap;
}
.lp-btn-hero-primary:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(245,130,31,0.8); }
.lp-btn-hero-secondary {
  font-size: 0.98rem; font-weight: 700; color: #fff;
  background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.35); border-radius: 12px;
  padding: 0.9rem 1.6rem; cursor: pointer; font-family: inherit; transition: all 0.18s; white-space: nowrap;
}
.lp-btn-hero-secondary:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.6); }
/* Honest highlights row */
.lp-hero-highlights { display: flex; flex-wrap: wrap; gap: 2rem 2.5rem; margin-top: 0.5rem; }
.lp-hl { display: flex; flex-direction: column; }
.lp-hl strong { font-size: 1.65rem; font-weight: 800; color: #fff; line-height: 1; }
.lp-hl span { font-size: 0.8rem; color: rgba(255,255,255,0.65); margin-top: 0.3rem; }
/* Hero 4-step process (dotted connector) */
.lp-hero-steps {
  position: relative; margin: 3rem auto 0; max-width: 820px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.lp-hero-steps::before {
  content: ''; position: absolute; top: 23px; left: 12.5%; right: 12.5%;
  border-top: 2px dashed #d9d3f2; z-index: 0;
}
.lp-hero-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lp-hero-step-num {
  width: 46px; height: 46px; border-radius: 50%; margin-bottom: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem; color: #fff;
  background: linear-gradient(135deg, #1471D8, #1471D8);
  box-shadow: 0 8px 20px -8px rgba(79,70,229,0.6);
}
.lp-hero-step strong { font-size: 0.92rem; color: #1f2937; }
.lp-hero-step span { font-size: 0.78rem; color: #6b7280; margin-top: 0.15rem; }
.lp-btn-hero-ghost {
  font-size: 0.925rem; font-weight: 600; color: #1D4ED8;
  background: rgba(99,102,241,0.08); border: 1.5px solid rgba(99,102,241,0.3);
  border-radius: 12px; padding: 0.9rem 1.5rem; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center;
  transition: all 0.15s; font-family: inherit;
}
.lp-btn-hero-ghost:hover { background: rgba(99,102,241,0.14); border-color: rgba(99,102,241,0.5); color: #312E81; }
.lp-hero-trust { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.lp-hero-trust span { font-size: 0.82rem; color: #64748b; font-weight: 500; }

/* Feature icons row */
.lp-hero-features { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 1.75rem; margin-bottom: 2rem; }
.lp-hero-feat { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
.lp-hero-feat-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(99,102,241,0.1); border: 1.5px solid rgba(99,102,241,0.2);
  display: flex; align-items: center; justify-content: center;
  color: #1D4ED8;
}
.lp-hero-feat span { font-size: 0.78rem; font-weight: 600; color: #475569; max-width: 80px; line-height: 1.3; }

/* Price note below CTA */
.lp-hero-price-note { font-size: 0.85rem; color: #64748b; margin-top: 0.875rem; }
.lp-hero-price-note strong { color: #1D4ED8; font-weight: 700; }
.lp-hero-trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1.1rem; }
.lp-hero-trust span { font-size: 0.82rem; font-weight: 600; color: #475569; }

/* Hero visual — floating glass "live report" mockup */
.lp-hero-visual {
  position: relative; min-height: 440px;
  display: flex; align-items: center; justify-content: center;
}
.lp-hero-mock {
  position: relative; z-index: 2; width: 100%; max-width: 380px;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,0.6); border-radius: 22px; padding: 1.4rem;
  box-shadow: 0 40px 90px -28px rgba(0,0,0,0.55);
  animation: lp-float 6s ease-in-out infinite;
}
@keyframes lp-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.lp-hero-mock-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.lp-hero-mock-avatar { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #1471D8, #0E4FA6); color: #fff; font-weight: 800; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; }
.lp-hero-mock-name { font-weight: 800; color: #1f2937; font-size: 0.95rem; }
.lp-hero-mock-live { font-size: 0.74rem; color: #16a34a; font-weight: 600; display: flex; align-items: center; gap: 0.35rem; }
.lp-hero-mock-live span { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: lp-pulse 1.4s infinite; }
@keyframes lp-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.lp-hero-mock-q { font-size: 0.96rem; font-weight: 600; color: #111827; line-height: 1.45; background: #eff6ff; border-radius: 12px; padding: 0.8rem 0.9rem; margin-bottom: 1.1rem; }
.lp-hero-mock-scorerow { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.lp-hero-mock-ring { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: conic-gradient(#1471D8 0% 84%, #e0f2fe 84% 100%); }
.lp-hero-mock-ring span { width: 50px; height: 50px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #1471D8; font-size: 1.05rem; }
.lp-hero-mock-scoremeta strong { display: block; color: #1f2937; font-size: 0.95rem; }
.lp-hero-mock-scoremeta span { font-size: 0.78rem; color: #6b7280; }
.lp-hero-mock-bars { display: flex; flex-direction: column; gap: 0.7rem; }
.lp-hero-mock-bar label { font-size: 0.74rem; color: #6b7280; font-weight: 600; display: block; margin-bottom: 0.3rem; }
.lp-hero-mock-bar i { display: block; height: 7px; border-radius: 6px; background: #e0f2fe; position: relative; overflow: hidden; }
.lp-hero-mock-bar i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, #1471D8, #0E4FA6); animation: lp-fill 1.4s ease both; }
@keyframes lp-fill { from { width: 0; } }
.lp-hero-float { position: absolute; z-index: 3; font-size: 0.78rem; font-weight: 700; padding: 0.5rem 0.85rem; border-radius: 12px; background: #fff; box-shadow: 0 14px 34px -12px rgba(0,0,0,0.28); white-space: nowrap; }
.lp-hero-float-1 { top: 4%; right: -2%; color: #16a34a; animation: lp-float 5s ease-in-out infinite; }
.lp-hero-float-2 { bottom: 6%; left: -4%; color: #0E4FA6; animation: lp-float 7s ease-in-out infinite reverse; }
.lp-mock-card {
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08);
}
.lp-mock-topbar {
  background: #F3F4F6; padding: 0.6rem 1rem;
  display: flex; align-items: center; gap: 0.75rem;
  border-bottom: 1px solid #E5E7EB;
}
.lp-mock-dots { display: flex; gap: 5px; }
.lp-mock-dots span { width: 11px; height: 11px; border-radius: 50%; }
.lp-mock-dots span:nth-child(1) { background: #EF4444; }
.lp-mock-dots span:nth-child(2) { background: #F59E0B; }
.lp-mock-dots span:nth-child(3) { background: #10B981; }
.lp-mock-url { font-size: 0.72rem; color: #9CA3AF; font-weight: 500; margin: 0 auto; }
.lp-mock-progress { height: 3px; background: #E5E7EB; }
.lp-mock-prog-fill { height: 100%; width: 44%; background: linear-gradient(to right, #1471D8, #5EA8FF); }
.lp-mock-body { display: grid; grid-template-columns: 38% 62%; }
.lp-mock-ai-col {
  background: linear-gradient(160deg, #EEF2FF 0%, #C7D2FE 100%);
  padding: 1.25rem 0.75rem 1rem;
  display: flex; flex-direction: column; align-items: center;
  border-right: 1px solid rgba(79,70,229,0.15); gap: 0.5rem;
}
.lp-mock-face {
  width: 62px; height: 76px; background: #fff;
  border-radius: 12px; border: 2px solid #C7D2FE;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.25rem;
}
.lp-mock-soundbars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.lp-mock-soundbars span { width: 3px; background: var(--primary); border-radius: 3px; opacity: 0.7; }
.lp-mock-soundbars span:nth-child(1) { height: 5px;  animation: lp-bar 0.75s ease-in-out infinite 0s; }
.lp-mock-soundbars span:nth-child(2) { height: 10px; animation: lp-bar 0.75s ease-in-out infinite 0.15s; }
.lp-mock-soundbars span:nth-child(3) { height: 14px; animation: lp-bar 0.75s ease-in-out infinite 0.3s; }
.lp-mock-soundbars span:nth-child(4) { height: 9px;  animation: lp-bar 0.75s ease-in-out infinite 0.15s; }
.lp-mock-soundbars span:nth-child(5) { height: 5px;  animation: lp-bar 0.75s ease-in-out infinite 0.06s; }
@keyframes lp-bar { 0%,100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
.lp-mock-ail { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); }
.lp-mock-right-col { padding: 1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.lp-mock-meta-row { display: flex; justify-content: space-between; align-items: center; }
.lp-mock-role-tag { font-size: 0.72rem; font-weight: 600; color: var(--text-2); }
.lp-mock-q-badge { font-size: 0.68rem; font-weight: 700; background: var(--primary-light); color: var(--primary); padding: 0.2rem 0.55rem; border-radius: 20px; }
.lp-mock-qbubble { background: var(--primary-light); border-radius: 0 12px 12px 12px; padding: 0.7rem 0.85rem; font-size: 0.78rem; font-weight: 500; color: var(--text); line-height: 1.55; }
.lp-mock-recording { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; color: #EF4444; font-weight: 600; }
.lp-mock-rec-dot { width: 7px; height: 7px; border-radius: 50%; background: #EF4444; animation: lp-rec-pulse 1.2s ease-in-out infinite; }
@keyframes lp-rec-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }

/* Report preview card in hero */
.lp-mock-report {
  background: rgba(255,255,255,0.85); border: 1px solid rgba(99,102,241,0.15);
  border-radius: 14px; padding: 1rem 1.25rem;
  box-shadow: 0 8px 32px rgba(99,102,241,0.1);
  backdrop-filter: blur(8px);
}
.lp-mock-report-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.lp-mock-report-header span { font-size: 0.7rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; }
.lp-mock-score { font-size: 1.4rem; font-weight: 800; color: #059669; }
.lp-mock-score small { font-size: 0.72rem; font-weight: 500; color: #94a3b8; }
.lp-mock-bars-grid { display: flex; flex-direction: column; gap: 0.5rem; }
.lp-mock-bar-row { display: flex; align-items: center; gap: 0.75rem; }
.lp-mock-bar-row span { font-size: 0.68rem; font-weight: 500; color: #475569; width: 105px; flex-shrink: 0; }
.lp-mock-bar-bg { flex: 1; height: 6px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.lp-mock-bar-fill { height: 100%; background: linear-gradient(to right, #6366f1, #8b5cf6); border-radius: 99px; }

/* ── Stats bar ── */
.lp-statsbar { background: #fff; border-bottom: 1px solid var(--border); padding: 1.5rem 2rem; }
.lp-statsbar-inner { max-width: clamp(1200px, 88vw, 1600px); margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.lp-sstat { display: flex; flex-direction: column; align-items: center; padding: 0 2.5rem; text-align: center; }
.lp-sstat strong { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.5px; line-height: 1; background: linear-gradient(100deg, #1471D8, #0E4FA6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lp-sstat span { font-size: 0.72rem; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.2rem; }
.lp-sstat-sep { width: 1px; height: 40px; background: var(--border); flex-shrink: 0; }

/* ── Section base ── */
.lp-section { padding: 5.5rem 2rem; }
.lp-section-inner { max-width: clamp(1200px, 88vw, 1600px); margin: 0 auto; }
.lp-section-eyebrow { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); margin-bottom: 0.6rem; display: block; }
.lp-section-title { font-size: 2.4rem; font-weight: 800; letter-spacing: -1px; line-height: 1.15; color: var(--text); margin-bottom: 1rem; }
.lp-section-title em { font-style: normal; color: var(--primary); }
.lp-section-sub { font-size: 1rem; color: var(--text-2); line-height: 1.7; max-width: 560px; margin-bottom: 3rem; }

/* ── How it works ── */
.lp-how-section { background: #F9FAFB; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.lp-how-steps {
  display: grid;
  grid-template-columns: 1fr 40px 1fr 40px 1fr 40px 1fr;
  align-items: start; gap: 0; margin-top: 3.5rem;
}
.lp-how-step { text-align: center; padding: 0 0.75rem; }
.lp-how-icon {
  width: 64px; height: 64px; background: var(--primary-light);
  border-radius: 16px; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.lp-how-step-n { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; color: var(--primary); text-transform: uppercase; margin-bottom: 0.6rem; }
.lp-how-step h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.55rem; line-height: 1.4; }
.lp-how-step p { font-size: 0.85rem; color: var(--text-2); line-height: 1.7; }
.lp-how-connector {
  display: flex; align-items: center; justify-content: center;
  padding-top: 1.75rem; color: var(--text-2); font-size: 1.2rem; opacity: 0.4;
}

/* ── Features ── */
.lp-features-section { background: #fff; }

/* Nav shadow on scroll */
.lp-nav.lp-nav-scrolled { box-shadow: 0 2px 16px rgba(0,0,0,0.08); }
.lp-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.lp-feat-card {
  background: #fff; border: 1px solid #eef0f4;
  border-radius: 18px; padding: 1.75rem; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  position: relative; overflow: hidden;
}
.lp-feat-card::before { content: ''; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: linear-gradient(100deg, #1471D8, #0E4FA6); opacity: 0; transition: opacity 0.18s; }
.lp-feat-card:hover { border-color: transparent; transform: translateY(-6px); box-shadow: 0 22px 48px -20px rgba(124,58,237,0.4); }
.lp-feat-card:hover::before { opacity: 1; }
.lp-feat-icon { font-size: 1.85rem; margin-bottom: 1rem; display: block; }
.lp-feat-icon-svg { width: 50px; height: 50px; background: linear-gradient(135deg, #1471D8, #0E4FA6); color: #fff; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; flex-shrink: 0; box-shadow: 0 10px 24px -10px rgba(124,58,237,0.6); }
.lp-feat-card h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.45rem; }
.lp-feat-card p { font-size: 0.875rem; color: var(--text-2); line-height: 1.7; }

/* ── Roles ── */
/* ── Who it's for ── */
.lp-audience-section { background: #F9FAFB; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.lp-audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.lp-audience-card {
  background: #fff; border: 1.5px solid var(--border); border-radius: 20px;
  padding: 2rem 1.75rem; transition: all 0.2s;
}
.lp-audience-card:hover { border-color: var(--primary); box-shadow: 0 8px 32px rgba(99,102,241,0.1); transform: translateY(-3px); }
.lp-audience-card-mid { border-color: #C7D2FE; background: linear-gradient(160deg, #EEF2FF 0%, #fff 60%); }
.lp-audience-icon-wrap {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(99,102,241,0.1); border: 1.5px solid rgba(99,102,241,0.2);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem;
}
.lp-audience-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 0.65rem; }
.lp-audience-card p { font-size: 0.875rem; color: var(--text-2); line-height: 1.7; margin-bottom: 1.25rem; }
.lp-audience-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.lp-audience-list li { font-size: 0.82rem; color: var(--text-2); padding-left: 1.1rem; position: relative; }
.lp-audience-list li::before { content: '→'; position: absolute; left: 0; color: var(--primary); font-weight: 700; }

/* ── Report preview ── */
.lp-report-preview-section { background: #fff; }
.lp-report-preview-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.lp-rp-title { font-size: 2.1rem; font-weight: 800; line-height: 1.2; color: var(--text); margin: 0.75rem 0 1.25rem; letter-spacing: -0.5px; }
.lp-rp-feature-list { list-style: none; padding: 0; margin: 0 0 2rem 0; display: flex; flex-direction: column; gap: 0.65rem; }
.lp-rp-feature-list li { font-size: 0.9rem; color: var(--text); display: flex; align-items: baseline; gap: 0.6rem; }
.lp-rp-card {
  background: linear-gradient(160deg, #1A1040 0%, #2D1B69 100%);
  border-radius: 20px; padding: 1.75rem; color: #fff;
  box-shadow: 0 32px 80px rgba(45,27,105,0.35);
}
.lp-rp-card-header { font-size: 0.8rem; font-weight: 700; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem; }
.lp-rp-score-row { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.25rem; }
.lp-rp-circle { position: relative; flex-shrink: 0; }
.lp-rp-score-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 800; color: #fff; }
.lp-rp-verdict { display: flex; flex-direction: column; gap: 0.3rem; }
.lp-rp-verdict strong { font-size: 0.95rem; }
.lp-rp-verdict span { font-size: 0.78rem; color: rgba(255,255,255,0.5); line-height: 1.4; }
.lp-rp-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 1rem 0; }
.lp-rp-bars { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1.25rem; }
.lp-rp-bar-row { display: grid; grid-template-columns: 90px 1fr 36px; align-items: center; gap: 0.75rem; font-size: 0.78rem; color: rgba(255,255,255,0.6); }
.lp-rp-bar { height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.lp-rp-bar div { height: 100%; background: linear-gradient(90deg, #6366F1, #A78BFA); border-radius: 3px; }
.lp-rp-bar-row span:last-child { color: #fff; font-weight: 600; font-size: 0.8rem; }
.lp-rp-suggestion { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 0.875rem 1rem; font-size: 0.8rem; color: rgba(255,255,255,0.7); line-height: 1.5; }
.lp-rp-suggestion strong { color: #fff; }

/* ── Mid-page CTA strip ── */
.lp-midpage-cta { background: linear-gradient(90deg, #1D4ED8 0%, #1471D8 100%); padding: 1.25rem 2rem; }
.lp-midpage-cta-inner { max-width: clamp(1200px, 88vw, 1600px); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.lp-midpage-cta-inner strong { color: #fff; font-size: 1rem; font-weight: 700; display: block; margin-bottom: 0.2rem; }
.lp-midpage-cta-inner span { color: rgba(255,255,255,0.75); font-size: 0.875rem; }
.lp-midpage-cta-btn { background: #fff; color: #1D4ED8; border: none; border-radius: 10px; padding: 0.7rem 1.6rem; font-weight: 700; font-size: 0.95rem; cursor: pointer; white-space: nowrap; font-family: inherit; transition: all 0.15s; }
.lp-midpage-cta-btn:hover { background: #EEF2FF; transform: translateY(-1px); }

/* ── Comparison table ── */
.lp-compare-section { background: #F9FAFB; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.lp-compare-wrap { overflow-x: auto; margin-top: 2.5rem; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.06); }
.lp-compare-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; font-size: 0.875rem; }
.lp-compare-table thead tr { background: #1E1B4B; color: #fff; }
.lp-compare-table th { padding: 1rem 1.25rem; text-align: center; font-weight: 600; font-size: 0.82rem; }
.lp-compare-table th:first-child { text-align: left; color: rgba(255,255,255,0.6); }
.lp-compare-table td { padding: 0.875rem 1.25rem; border-bottom: 1px solid #F1F5F9; text-align: center; color: var(--text-2); }
.lp-compare-table td:first-child { text-align: left; color: var(--text); font-weight: 500; }
.lp-compare-table tbody tr:last-child td { border-bottom: none; }
.lp-compare-table tbody tr:hover td { background: #FAFAFA; }
.lp-compare-ours { background: rgba(99,102,241,0.06) !important; font-weight: 600; }
.lp-compare-table thead .lp-compare-ours { background: #1D4ED8 !important; color: #fff; }
.lp-cmp-yes { color: #059669 !important; font-weight: 700; font-size: 1rem; }
.lp-cmp-no { color: #DC2626 !important; font-weight: 700; font-size: 1rem; }
.lp-cmp-maybe { color: #D97706 !important; font-size: 0.8rem; }

/* ── Blog preview ── */
.lp-blog-preview-section { background: #fff; }
.lp-blog-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.lp-blog-prev-card {
  border: 1.5px solid var(--border); border-radius: 16px; overflow: hidden;
  transition: all 0.18s; text-decoration: none; display: block; background: #fff;
}
.lp-blog-prev-card:hover { border-color: var(--primary); box-shadow: 0 8px 28px rgba(99,102,241,0.1); transform: translateY(-3px); }
.lp-blog-prev-body { padding: 1.5rem; }
.lp-blog-prev-cat { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); background: var(--primary-light); padding: 0.25rem 0.65rem; border-radius: 20px; display: inline-block; margin-bottom: 0.875rem; }
.lp-blog-prev-title { font-size: 0.95rem; font-weight: 700; color: var(--text); line-height: 1.45; margin-bottom: 0.65rem; }
.lp-blog-prev-desc { font-size: 0.82rem; color: var(--text-2); line-height: 1.6; margin-bottom: 1rem; }
.lp-blog-prev-read { font-size: 0.78rem; font-weight: 600; color: var(--primary); }

/* Responsive additions */
@media (max-width: 900px) {
  .lp-audience-grid { grid-template-columns: 1fr; }
  .lp-report-preview-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .lp-rp-title { font-size: 1.7rem; }
  .lp-blog-preview-grid { grid-template-columns: 1fr; }
  .lp-compare-table th, .lp-compare-table td { padding: 0.75rem 0.85rem; font-size: 0.8rem; }
}
@media (max-width: 640px) {
  .lp-audience-grid { gap: 1rem; }
  .lp-midpage-cta-inner { flex-direction: column; align-items: flex-start; }
  .lp-midpage-cta-btn { width: 100%; text-align: center; }
  .lp-blog-preview-grid { grid-template-columns: 1fr; }
}

.lp-roles-full { background: #F5F3FF; border-top: 1px solid #DDD6FE; border-bottom: 1px solid #DDD6FE; }
.lp-roles-cta-hint { font-size: 0.82rem; color: var(--text-2); margin-top: 1.25rem; text-align: center; }

/* AI role picker banner */
.lp-ai-pick-banner {
  margin-top: 1.5rem;
  display: flex; align-items: center; gap: 1.25rem;
  background: linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 100%);
  border: 1.5px solid #C7D2FE;
  border-radius: 16px; padding: 1.25rem 1.5rem;
  cursor: pointer; transition: all 0.2s;
}
.lp-ai-pick-banner:hover { border-color: var(--primary); box-shadow: 0 4px 20px rgba(99,102,241,0.15); transform: translateY(-1px); }
.lp-ai-pick-icon { font-size: 1.5rem; color: var(--primary); flex-shrink: 0; line-height: 1; }
.lp-ai-pick-text { flex: 1; }
.lp-ai-pick-text strong { display: block; font-size: 0.95rem; color: #1e1b4b; margin-bottom: 0.2rem; }
.lp-ai-pick-text span { font-size: 0.82rem; color: #6B7280; line-height: 1.4; }
.lp-ai-pick-cta {
  flex-shrink: 0; font-size: 0.85rem; font-weight: 700; color: var(--primary);
  background: #fff; border: 1.5px solid #C7D2FE; border-radius: 10px;
  padding: 0.55rem 1.1rem; white-space: nowrap; transition: all 0.15s;
}
.lp-ai-pick-banner:hover .lp-ai-pick-cta { background: var(--primary); color: #fff; border-color: var(--primary); }
@media (max-width: 560px) {
  .lp-ai-pick-banner { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .lp-ai-pick-cta { align-self: stretch; text-align: center; }
}

/* ── Testimonials ── */
.lp-testimonials-section { background: #F9FAFB; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.lp-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.lp-testi-card { background: #F9FAFB; border: 1.5px solid var(--border); border-radius: 16px; padding: 1.75rem; }
.lp-testi-stars { font-size: 0.9rem; color: #F59E0B; margin-bottom: 0.875rem; letter-spacing: 2px; }
.lp-testi-quote { font-size: 0.9rem; color: var(--text); line-height: 1.75; margin-bottom: 1.25rem; font-style: italic; }
.lp-testi-author { display: flex; align-items: center; gap: 0.75rem; }
.lp-testi-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lp-testi-author strong { display: block; font-size: 0.875rem; font-weight: 700; color: var(--text); font-style: normal; }
.lp-testi-author span { font-size: 0.78rem; color: var(--text-2); }

/* ── Pricing ── */
.lp-pricing-section { background: #F9FAFB; border-top: 1px solid var(--border); }
.lp-pricing-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 840px; margin: 0 auto; }
.lp-pricing-card { border-radius: 20px; padding: 2.25rem 2rem; position: relative; }
.lp-pricing-free-card { background: #fff; border: 2px solid var(--border); }
.lp-pricing-paid-card { background: linear-gradient(160deg, #1E1B4B 0%, #312E81 100%); color: #fff; box-shadow: 0 24px 64px rgba(30,27,75,0.35); transform: translateY(-6px); }
.lp-pricing-popular-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(90deg, #10B981, #059669); color: #fff;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.3rem 1rem; border-radius: 20px; white-space: nowrap;
}
.lp-pricing-plan-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem; }
.lp-pricing-free-card .lp-pricing-plan-label { color: var(--text-2); }
.lp-pricing-paid-card .lp-pricing-plan-label { color: rgba(255,255,255,0.55); }
.lp-pricing-price-wrap { display: flex; align-items: baseline; gap: 0.15rem; margin-bottom: 1.5rem; }
.lp-pricing-curr { font-size: 1.4rem; font-weight: 700; }
.lp-pricing-free-card .lp-pricing-curr { color: var(--text); }
.lp-pricing-paid-card .lp-pricing-curr { color: rgba(255,255,255,0.8); }
.lp-pricing-price-big { font-size: 3rem; font-weight: 800; letter-spacing: -2px; line-height: 1; }
.lp-pricing-free-card .lp-pricing-price-big { color: var(--text); }
.lp-pricing-paid-card .lp-pricing-price-big { color: #fff; }
.lp-pricing-per { font-size: 0.85rem; font-weight: 500; margin-left: 0.3rem; }
.lp-pricing-free-card .lp-pricing-per { color: var(--text-2); }
.lp-pricing-paid-card .lp-pricing-per { color: rgba(255,255,255,0.45); }
.lp-pricing-list { list-style: none; padding: 0; margin: 0 0 1.75rem 0; display: flex; flex-direction: column; gap: 0.6rem; }
.lp-pricing-list li { font-size: 0.875rem; line-height: 1.5; display: flex; align-items: baseline; gap: 0.5rem; }
.lp-pricing-free-card .lp-pricing-list li { color: var(--text); }
.lp-pricing-paid-card .lp-pricing-list li { color: rgba(255,255,255,0.85); }
.lp-check { color: var(--green); font-weight: 700; flex-shrink: 0; }
.lp-check-hl { color: #6EE7B7; font-weight: 700; flex-shrink: 0; }
.lp-check-muted { color: var(--text-2); flex-shrink: 0; }
.lp-pricing-free-btn { background: transparent !important; border: 2px solid var(--border) !important; color: var(--text) !important; }
.lp-pricing-free-btn:hover { border-color: var(--primary) !important; color: var(--primary) !important; }
.lp-pricing-paid-btn { background: var(--accent) !important; color: #fff !important; font-weight: 700 !important; }
.lp-pricing-paid-btn:hover { background: var(--accent-dark) !important; }

/* ── FAQ ── */
.lp-faq-section { background: #F9FAFB; border-top: 1px solid var(--border); }
.lp-faq-inner { display: grid; grid-template-columns: 280px 1fr; gap: 4rem; align-items: start; }
.lp-faq-header .lp-section-title { font-size: 2rem; margin-bottom: 0.5rem; }
.lp-faq-header p { font-size: 0.9rem; color: var(--text-2); line-height: 1.65; }
.lp-faq-list { border: 1.5px solid var(--border); border-radius: 16px; overflow: hidden; background: #fff; }
.lp-faq-item { border-bottom: 1px solid var(--border); }
.lp-faq-item:last-child { border-bottom: none; }
.lp-faq-q {
  width: 100%; text-align: left; background: none; border: none; padding: 1.25rem 1.5rem;
  font-size: 0.9rem; font-weight: 600; color: var(--text); cursor: pointer;
  font-family: inherit; display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; transition: background 0.15s;
}
.lp-faq-q:hover { background: var(--bg); }
.lp-faq-item.open .lp-faq-q { color: var(--primary); background: var(--primary-light); }
.lp-faq-arrow { font-size: 1rem; color: var(--text-2); transition: transform 0.22s; flex-shrink: 0; font-weight: 400; }
.lp-faq-item.open .lp-faq-arrow { transform: rotate(180deg); color: var(--primary); }
.lp-faq-a { display: none; padding: 0 1.5rem 1.25rem; }
.lp-faq-item.open .lp-faq-a { display: block; }
.lp-faq-a p { font-size: 0.875rem; color: var(--text-2); line-height: 1.75; margin: 0; }
.lp-faq-a a { color: var(--primary); }

/* ── CTA Band ── */
/* ── Enquiry / Contact section ── */
.lp-enquiry-section { background: #F8F7FF; }
.lp-enquiry-inner {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 4rem;
  align-items: start;
}
.lp-enquiry-left { padding-top: 0.5rem; }
.lp-enquiry-form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 24px rgba(79,70,229,0.07);
}
.lp-enquiry-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.lp-enquiry-field { margin-bottom: 1.1rem; }
.lp-enq-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  margin-bottom: 0.4rem;
}
.lp-enq-input {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--text-1);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.lp-enq-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
.lp-enq-textarea { resize: vertical; min-height: 110px; }
.lp-enq-btn { width: 100%; margin-top: 0.25rem; }
.lp-enq-success {
  text-align: center;
  padding: 3rem 2rem;
  color: #065F46;
  background: #ECFDF5;
  border-color: #6EE7B7;
}
@media (max-width: 768px) {
  .lp-enquiry-inner { grid-template-columns: 1fr; gap: 2rem; }
  .lp-enquiry-row { grid-template-columns: 1fr; }
}

.lp-cta-band {
  background: linear-gradient(120deg, #1471D8 0%, #1471D8 38%, #0E4FA6 100%);
  background-size: 200% 200%;
  animation: lp-cta-shift 12s ease infinite;
  padding: 5.5rem 2rem; text-align: center; position: relative; overflow: hidden;
}
@keyframes lp-cta-shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.lp-cta-band-inner { max-width: 680px; margin: 0 auto; }
.lp-cta-band h2 { font-size: 2.6rem; font-weight: 800; color: #fff; letter-spacing: -1px; margin-bottom: 0.875rem; line-height: 1.15; }
.lp-cta-band p { font-size: 1rem; color: rgba(255,255,255,0.6); line-height: 1.7; margin-bottom: 2.25rem; }
.lp-cta-band-btn {
  font-size: 1.05rem; font-weight: 700; color: #fff; background: var(--accent);
  border: none; border-radius: 14px; padding: 1rem 2.5rem; cursor: pointer;
  font-family: inherit; box-shadow: 0 12px 30px -8px rgba(245,130,31,0.6);
  display: inline-block; transition: all 0.15s; margin-bottom: 1rem;
}
.lp-cta-band-btn:hover { background: #EEF2FF; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.3); }
.lp-cta-band-note { display: block; font-size: 0.82rem; color: rgba(255,255,255,0.35); margin-top: 0.75rem; }

/* ── Start form section ── */
.lp-start-form-section { background: #fff; }
.lp-start-form-section .lp-section-inner { text-align: center; }
.lp-start-form-section .lp-section-sub { margin-left: auto; margin-right: auto; }
.lp-start-form-card { max-width: 520px; margin: 0 auto; text-align: left; }

/* ── Landing Footer ── */
.lp-land-footer { background: #0F0D1F; padding: 4rem 2rem 0; }
.lp-land-footer-inner {
  max-width: clamp(1200px, 88vw, 1600px); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.lp-foot-brand p { font-size: 0.875rem; color: rgba(255,255,255,0.4); line-height: 1.7; max-width: 280px; margin-top: 0.5rem; }
.lp-foot-social { display: flex; gap: 0.65rem; margin-top: 1.25rem; flex-wrap: wrap; }
.lp-foot-social a {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.55); transition: all 0.18s; text-decoration: none;
}
.lp-foot-social a:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-2px); }
.lp-foot-links-group { display: flex; flex-direction: column; gap: 0.55rem; }
.lp-foot-links-group strong { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); margin-bottom: 0.35rem; display: block; }
.lp-foot-links-group a { font-size: 0.875rem; color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.15s; }
.lp-foot-links-group a:hover { color: #fff; }
.lp-foot-bottom { max-width: clamp(1200px, 88vw, 1600px); margin: 0 auto; padding: 1.5rem 0; text-align: center; }
.lp-foot-bottom span { font-size: 0.78rem; color: rgba(255,255,255,0.28); }

/* ── Full-width interview screen ── */

body.interview-active .site-header,
body.interview-active .site-footer {
  display: none !important;
}

body.interview-active main {
  max-width: 100%;
  padding: 0;
}

body.interview-active #screen-interview {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.interview-fullpage {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Top bar: meta + progress + controls */
.interview-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.65rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}

.itb-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.itb-progress {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.itb-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* Reuse existing .interview-meta and .question-counter inside topbar */
.interview-topbar .interview-meta {
  font-size: 0.8rem;
  color: var(--text-2);
}

.interview-topbar .question-counter {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
}

.interview-topbar .progress-track {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.interview-topbar .progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* Make grid fill remaining viewport height */
.interview-fullpage .interview-grid {
  flex: 1;
  min-height: 0;
}

/* Full-width grid — break out of any max-width constraint */
body.interview-active .interview-grid {
  display: grid;
  grid-template-columns: 38% 62%;
  width: 100%;
}

body.interview-active .interview-right {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* ── Richer report styles ── */

/* Grade + readiness chips in banner */
.report-meta-chips {
  display: flex;
  gap: 0.65rem;
  margin-top: 0.65rem;
  flex-wrap: wrap;
}

.grade-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.25rem 0.85rem;
  border-radius: 20px;
  letter-spacing: 0.04em;
}

.readiness-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.85rem;
  border-radius: 20px;
  background: var(--primary-light);
  color: var(--primary-dark);
}

/* Color-coded improvement cards */
.improvement-card {
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.75rem;
  border-left: 4px solid;
}

.improvement-card .imp-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.imp-priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.imp-topic {
  font-size: 0.875rem;
  font-weight: 700;
}

.imp-detail {
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0;
}

.imp-priority-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: auto;
  padding: 0.1rem 0.5rem;
  border-radius: 10px;
}

/* Skill gap bars */
.skill-gaps-section { margin-bottom: 2.25rem; }

.skill-gap-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.skill-gap-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  width: 160px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skill-gap-bar-bg {
  flex: 1;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.skill-gap-bar-fill {
  height: 100%;
  border-radius: 4px;
  width: 0;
  transition: width 0.8s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.skill-gap-score {
  font-size: 0.8rem;
  font-weight: 700;
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Performance breakdown (soft-skill dimensions) ── */
.perf-sub { font-size: 0.82rem; color: var(--text-2); margin: -0.4rem 0 1rem; }
.perf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
}
.perf-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.perf-card:hover { border-color: var(--primary); box-shadow: 0 6px 20px rgba(79,70,229,0.08); transform: translateY(-2px); }
.perf-card-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.6rem; }
.perf-name { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.perf-score { font-size: 1.4rem; font-weight: 800; line-height: 1; }
.perf-score small { font-size: 0.72rem; font-weight: 600; opacity: 0.55; }
.perf-bar-bg { height: 7px; background: #EEF0F4; border-radius: 5px; overflow: hidden; }
.perf-bar-fill { height: 100%; width: 0; border-radius: 5px; transition: width 0.85s cubic-bezier(0.34, 1.2, 0.64, 1); }
.perf-note { font-size: 0.74rem; color: var(--text-2); margin: 0.55rem 0 0; line-height: 1.4; }

/* Per-question inline feedback row */
.qcard-inline-feedback {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.qcard-strength,
.qcard-improve {
  font-size: 0.82rem;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  font-weight: 500;
  line-height: 1.4;
}

.qcard-strength {
  background: var(--green-light);
  color: var(--green-text);
}

.qcard-improve {
  background: var(--amber-light);
  color: var(--amber-text);
}

/* ── Feedback form ── */

.report-share-bar {
  background: linear-gradient(135deg, #F0FDF4, #ECFDF5);
  border: 1.5px solid #A7F3D0;
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0;
  text-align: center;
}
.report-share-label {
  font-size: 1rem;
  font-weight: 700;
  color: #065F46;
  margin-bottom: 0.25rem;
}
.report-share-sub {
  font-size: 0.82rem;
  color: #6B7280;
  margin-bottom: 1rem;
}
.report-share-btns {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.report-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.report-share-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.report-share-btn:active { transform: translateY(0); }
.rshare-wa  { background: #25D366; color: #fff; }
.rshare-li  { background: #0A66C2; color: #fff; }
.rshare-copy { background: #F3F4F6; color: #374151; }

.report-feedback-section {
  border-top: 1px solid var(--border);
  padding-top: 2rem;
  margin-top: 0.5rem;
}

.feedback-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.feedback-section-sub {
  font-size: 0.875rem;
  color: var(--text-2);
  margin-bottom: 1rem;
}

.feedback-stars-row {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.star-btn {
  background: none;
  border: 2px solid var(--border);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  color: var(--text-2);
}

.star-btn:hover,
.star-btn.active {
  border-color: var(--amber);
  background: var(--amber-light);
  color: var(--amber);
  transform: scale(1.1);
}

.feedback-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  resize: vertical;
  min-height: 80px;
  margin-bottom: 0.85rem;
  transition: border-color 0.15s;
}

.feedback-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
}

.feedback-success-msg {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--green-text);
  background: var(--green-light);
  padding: 0.65rem 1rem;
  border-radius: 10px;
  margin-top: 0.5rem;
}

/* ── Mobile: interview full-page ── */
@media (max-width: 768px) {
  body.interview-active .interview-grid {
    grid-template-columns: 1fr;
  }

  .interview-topbar {
    padding: 0.5rem 1rem;
    flex-wrap: wrap;
  }

  .itb-meta { gap: 0.5rem; }

  body.interview-active .ai-panel {
    min-height: 160px;
    padding: 1.25rem 1rem 2.5rem;
    border-right: none;
    border-bottom: 1px solid rgba(79,70,229,0.15);
  }

  body.interview-active .ai-panel .avatar-outer,
  body.interview-active .ai-panel .avatar-face {
    width: 120px;
    height: 148px;
  }

  body.interview-active .candidate-panel {
    height: 110px;
  }

  .skill-gap-label { width: 110px; font-size: 0.8rem; }
}

@media (max-width: 480px) {
  .interview-topbar .interview-meta { display: none; }

  body.interview-active .ai-panel {
    min-height: 140px;
  }

  .feedback-stars-row { gap: 0.3rem; }
  .star-btn { width: 36px; height: 36px; font-size: 1.1rem; }
}

/* ── Landing responsive ── */
@media (max-width: 1024px) {
  .lp-hero-title { font-size: 2.9rem; }
  .lp-feat-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-land-footer-inner { grid-template-columns: 1fr 1fr; }
  .lp-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .lp-hero-inner { grid-template-columns: 1fr; }
  .lp-hero-visual { display: none; }
  .lp-hero-title { font-size: 2.5rem; }
  .lp-hero-section { min-height: auto; }
  .lp-hero-steps { grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; }
  .lp-hero-steps::before { display: none; }
  .lp-testi-grid { grid-template-columns: 1fr; }
  .lp-pricing-wrap { grid-template-columns: 1fr; max-width: 440px; }
  .lp-faq-inner { grid-template-columns: 1fr; gap: 2rem; }
  .lp-section-title { font-size: 2rem; }
  .lp-how-steps { grid-template-columns: 1fr; gap: 2.5rem; }
  .lp-how-connector { display: none; }
  .lp-land-footer-inner { grid-template-columns: 1fr; gap: 2rem; }
}
/* Desktop nav: tighten spacing on smaller laptops so all items fit
   (logo + links + Guides + Sign In + Enquiry + 2 CTAs) before collapsing. */
@media (min-width: 1041px) and (max-width: 1280px) {
  .lp-nav-inner { gap: 0.6rem; padding: 0 1rem; }
  .lp-nav-links { gap: 0; }
  .lp-nav-links a { padding: 0.4rem 0.5rem; font-size: 0.82rem; }
  .lp-nav-cta-group .lp-nav-cta { padding: 0.45rem 0.8rem; font-size: 0.82rem; }
  .lp-nav-signin { padding: 0.4rem 0.7rem; font-size: 0.82rem; }
  .lp-nav-enquire { padding: 0.4rem 0.6rem; font-size: 0.8rem; }
}
/* ── Mobile / small-laptop nav: hamburger + dropdown ── */
@media (max-width: 1040px) {
  .lp-nav-burger { display: inline-flex; align-items: center; justify-content: center; }
  .lp-nav-collapse { display: none; }
  .lp-nav.open .lp-nav-collapse {
    display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 28px rgba(0,0,0,0.14); padding: 0.7rem 1rem 1rem;
    max-height: 82vh; overflow-y: auto;
  }
  .lp-nav.open .lp-nav-links { display: flex; flex-direction: column; gap: 0.1rem; margin: 0; width: 100%; }
  .lp-nav.open .lp-nav-links > li { width: 100%; }
  .lp-nav.open .lp-nav-links a { display: block; padding: 0.65rem 0.55rem; border-radius: 8px; }
  /* Guides: collapsed by default (display:none so it reserves NO space),
     expands inline on tap. visibility:hidden would reserve height = blank gap. */
  .lp-nav.open .lp-nav-dropdown-menu { display: none; position: static; transform: none; box-shadow: none; border: none; min-width: 0; padding: 0.1rem 0 0.3rem 0.9rem; visibility: visible; opacity: 1; pointer-events: auto; }
  .lp-nav.open .lp-nav-dropdown:focus-within .lp-nav-dropdown-menu { display: flex; }
  .lp-nav.open .lp-nav-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--border); }
  .lp-nav.open #lp-nav-guest, .lp-nav.open #lp-nav-auth { flex-direction: column; align-items: stretch; gap: 0.5rem; width: 100%; }
  .lp-nav.open .lp-nav-actions button, .lp-nav.open .lp-nav-actions .lp-nav-cta { width: 100%; justify-content: center; }
  /* Dual CTAs stay in the top bar next to the hamburger */
  .lp-nav-cta-group { margin-left: auto; gap: 0.35rem; }
  .lp-nav-cta-group .lp-nav-cta { padding: 0.4rem 0.7rem; font-size: 0.8rem; }
}
@media (max-width: 400px) {
  /* Free up width on tiny phones: keep the logo icon, drop the wordmark */
  .lp-nav .logo-wordmark { display: none; }
  .lp-nav-cta-group .lp-nav-cta { padding: 0.36rem 0.5rem; font-size: 0.72rem; }
  .lp-nav-cta-group { gap: 0.3rem; }
}
@media (max-width: 620px) {
  .lp-nav-inner { gap: 0.5rem; padding: 0.5rem 0.75rem; align-items: center; }
  .lp-nav-user-email-disp { display: none; }
  .lp-nav-cta-group .lp-nav-cta { padding: 0.38rem 0.6rem; font-size: 0.76rem; }
  .lp-nav-burger { padding: 0.25rem; }
  .lp-nav-burger svg { width: 24px; height: 24px; }

  .lp-section { padding: 3rem 1.25rem; }
  .lp-hero-section { padding: 2.75rem 1.25rem 3rem; }
  .lp-hero-title { font-size: 1.9rem; letter-spacing: -0.5px; line-height: 1.1; }
  .lp-hero-sub { font-size: 0.9rem; margin-bottom: 1.5rem; }
  .lp-hero-features { gap: 1.25rem; margin-bottom: 1.5rem; }
  .lp-hero-feat-icon { width: 44px; height: 44px; }
  .lp-hero-cta-row { flex-direction: column; align-items: stretch; gap: 0.75rem; margin-bottom: 0.75rem; }
  .lp-btn-hero-primary { text-align: center; padding: 0.875rem 1.5rem; }
  .lp-btn-hero-ghost { text-align: center; padding: 0.75rem 1.5rem; }
  .lp-hero-trust { flex-direction: column; gap: 0.4rem; }
  .lp-hero-trust span { font-size: 0.8rem; }

  .lp-cta-band { padding: 3rem 1.25rem; }
  .lp-cta-band h2 { font-size: 1.75rem; }
  .lp-section-title { font-size: 1.65rem; }
  .lp-feat-grid { grid-template-columns: 1fr; }

  .lp-statsbar { padding: 1rem 1.25rem; }
  .lp-statsbar-inner { flex-wrap: wrap; gap: 0; }
  .lp-sstat { flex: 0 0 50%; padding: 0.875rem 0.5rem; border-bottom: 1px solid rgba(79,70,229,0.1); }
  .lp-sstat:nth-child(odd) { border-right: 1px solid rgba(79,70,229,0.1); }
  .lp-sstat-sep { display: none; }
  .lp-sstat strong { font-size: 1.4rem; }
  .lp-sstat span { font-size: 0.7rem; }

  .lp-land-footer { padding: 2.5rem 1.25rem 0; }

  .lp-testi-card { padding: 1.5rem; }
  .lp-pricing-card { padding: 1.75rem 1.5rem; }

  .lp-how-step { padding: 1.5rem; }
}

/* ── PWA Install Banner ── */
#pwa-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  background: #fff; border-top: 1px solid var(--border);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.12); padding: 0.875rem 1rem;
  animation: slideUpBanner 0.3s ease;
}
@keyframes slideUpBanner {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.pwa-banner-inner {
  max-width: 640px; margin: 0 auto;
  display: flex; align-items: center; gap: 0.875rem;
}
.pwa-banner-icon { flex-shrink: 0; }
.pwa-banner-text { flex: 1; min-width: 0; }
.pwa-banner-text strong { display: block; font-size: 0.9rem; font-weight: 700; color: var(--text); }
.pwa-banner-text span { display: block; font-size: 0.8rem; color: var(--text-2); margin-top: 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pwa-banner-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.pwa-banner-btn-primary {
  background: var(--primary); color: #fff; border: none; border-radius: 8px;
  padding: 0.45rem 1rem; font-size: 0.875rem; font-weight: 600; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.pwa-banner-btn-primary:hover { background: var(--primary-dark, #1D4ED8); }
.pwa-banner-btn-close {
  background: none; border: none; color: var(--text-2); font-size: 1rem;
  cursor: pointer; padding: 0.25rem 0.4rem; line-height: 1; border-radius: 6px;
}
.pwa-banner-btn-close:hover { background: var(--border); }
@media (max-width: 480px) {
  .pwa-banner-text span { display: none; }
}

/* ── Basic Info screen ── */
.basic-info-card { max-width: 480px; margin: 0 auto; }

.basic-info-header { text-align: center; margin-bottom: 0.5rem; }

.basic-info-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--primary) 0%, #1471D8 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.basic-info-title { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.4rem; }
.basic-info-sub { font-size: 0.9rem; color: var(--text-2); }

/* ── Role picker modal ── */
.role-picker-box {
  max-width: 600px;
  width: 95vw;
  max-height: 85vh;
  overflow-y: auto;
}

.role-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.6rem;
}

.role-picker-card {
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  line-height: 1.3;
}

.role-picker-card:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
}

.role-picker-card.selected {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

/* Role/round display in start section */
.start-role-display {
  display: none;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: #EEF2FF;
  border: 1px solid #C7D2FE;
  border-radius: 8px;
}

.start-role-label {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 600;
  color: #3730A3;
}

.start-change-btn {
  font-size: 0.78rem;
  color: #1471D8;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
}

.start-change-btn:hover { background: #DDE4FF; }

/* ── Start button on LP ── */
.lp-start-big-btn {
  width: 100%;
  font-size: 1rem;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--accent) !important;
  box-shadow: 0 10px 26px -10px rgba(245,130,31,0.6);
}
.lp-start-big-btn:hover { background: var(--accent-dark) !important; }
/* Guest-intro primary CTA → orange to match */
.guest-intro-btn { background: var(--accent) !important; box-shadow: 0 10px 26px -10px rgba(245,130,31,0.6); }
.guest-intro-btn:hover { background: var(--accent-dark) !important; }

/* ── Guest interview intro (name + role, no signup) ── */
/* Only lay it out when it's the active screen — otherwise the id selector would
   override `.screen { display:none }` and the intro would cover the landing page. */
#screen-guest-intro.active {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
  background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 55%, #ede9fe 100%);
}
.guest-intro-card {
  width: 100%; max-width: 460px;
  padding: 2rem 1.85rem;
  text-align: left;
  border-radius: 20px;
  box-shadow: 0 24px 60px -28px rgba(79,70,229,0.45);
}
.guest-intro-badge {
  display: inline-block;
  background: #ede9fe; color: #6d28d9;
  font-size: 0.78rem; font-weight: 800;
  padding: 0.35rem 0.8rem; border-radius: 20px; margin-bottom: 1rem;
}
.guest-intro-title { font-size: 1.5rem; font-weight: 800; color: #111827; margin: 0 0 0.4rem; }
.guest-intro-sub { font-size: 0.92rem; color: #6b7280; margin: 0 0 1.5rem; line-height: 1.5; }
.guest-intro-field { display: block; margin-bottom: 1rem; }
.guest-intro-field > span { display: block; font-size: 0.8rem; font-weight: 700; color: #374151; margin-bottom: 0.4rem; }
.guest-intro-field input,
.guest-intro-field select {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 600;
  color: #1f2937;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.guest-intro-field input::placeholder { color: #9ca3af; font-weight: 500; }
.guest-intro-field select {
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center;
}
.guest-intro-field input:focus,
.guest-intro-field select:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.guest-intro-field input.field-error { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }
.guest-intro-btn { width: 100%; margin-top: 0.5rem; font-size: 1rem; padding: 0.9rem; }
.guest-intro-foot { text-align: center; font-size: 0.8rem; color: #6b7280; margin: 0.85rem 0 0; font-weight: 600; }
.guest-intro-signin { width: 100%; margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-2); }

/* ── Multi-step guest intro ── */
.gi-progress {
  height: 4px; background: #E5E7EB; border-radius: 2px; margin-bottom: 0.5rem; overflow: hidden;
}
.gi-prog-bar {
  height: 100%; background: var(--primary); border-radius: 2px;
  transition: width 0.4s ease;
}
.gi-step-label {
  font-size: 0.72rem; font-weight: 700; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1.25rem;
}
.gi-panel { animation: fadeUp 0.22s ease both; }
.gi-title {
  font-size: 1.55rem; font-weight: 800; color: #111827;
  margin: 0.75rem 0 0.4rem; line-height: 1.2;
}
.gi-sub { font-size: 0.9rem; color: #6b7280; margin: 0 0 1.25rem; line-height: 1.55; }

/* Loading bar (questions generating) */
.gi-loading-bar {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; color: var(--primary); font-weight: 600;
  margin-bottom: 1rem; padding: 0.5rem 0.75rem;
  background: var(--primary-light); border-radius: 8px;
}
.gi-loading-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
  animation: gi-dot-pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes gi-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}

/* Ready badge */
.gi-ready-badge {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; color: #065F46; font-weight: 700;
  background: #D1FAE5; border-radius: 8px;
  padding: 0.5rem 0.75rem; margin-bottom: 1rem;
}
.gi-ready-badge span { font-size: 1rem; }

/* ── Voice-only interview layout ── */
.interview-qa-section {
  flex: 1;
  overflow-y: auto;
  padding: 2rem 1.5rem 3rem;
}

.interview-qa-inner {
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

body.interview-active .interview-qa-section {
  max-width: 100%;
}

/* AI speaking indicator */
.ai-speaking-indicator {
  display: none;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1rem;
  padding: 0.4rem 0.875rem;
  background: rgba(139,92,246,0.1);
  border: 1px solid rgba(139,92,246,0.3);
  border-radius: 20px;
  width: fit-content;
}
.ai-speaking-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  animation: speaking-dot 1.2s ease-in-out infinite;
}
.ai-speaking-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-speaking-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes speaking-dot {
  0%, 60%, 100% { opacity: 0.3; transform: scale(0.85); }
  30% { opacity: 1; transform: scale(1.2); }
}
.ai-speaking-label {
  font-size: 0.8rem;
  color: var(--primary);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Save interview button */
.btn-save-interview {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: 1.5px solid var(--primary);
  border-radius: 8px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 600;
  transition: all 0.15s;
}
.btn-save-interview:hover { background: var(--primary); color: #fff; }
.btn-save-interview.saved { border-color: #10B981; color: #10B981; background: none; }

/* Fullscreen button */
.btn-fullscreen {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  color: var(--text-2);
  display: flex;
  align-items: center;
  transition: all 0.15s;
}
.btn-fullscreen:hover { border-color: var(--primary); color: var(--primary); }

/* Resume draft section */
.resume-draft-section {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  background: var(--primary-light);
  border: 1.5px solid rgba(79,70,229,0.25);
  border-radius: 10px;
  margin-bottom: 1rem;
}
.resume-draft-icon { color: var(--primary); flex-shrink: 0; }
.resume-draft-body { flex: 1; min-width: 0; }
.resume-draft-title { display: block; font-size: 0.78rem; font-weight: 700; color: var(--primary); }
.resume-draft-label { display: block; font-size: 0.8rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resume-draft-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* ── Mobile ── */
@media (max-width: 640px) {
  .interview-qa-section { padding: 1.25rem 1rem 2rem; }
  .role-picker-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   Proctur-style landing components
   ═══════════════════════════════════════════════════════════ */

/* Hero image (celebrating candidates from S3) */
.lp-hero-image {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  border-radius: 20px; box-shadow: 0 40px 90px -28px rgba(0,0,0,0.6);
  animation: lp-float 6s ease-in-out infinite;
}

/* Hero checklist (replaces highlights) */
.lp-hero-checklist { display: flex; flex-wrap: wrap; gap: 0.55rem 1.5rem; margin-top: 0.25rem; }
.lp-hero-checklist span { font-size: 0.9rem; font-weight: 600; color: rgba(255,255,255,0.9); }

/* Alternating section background */
.lp-section-alt { background: #F4F7FC; }

/* ── Our Services — 2×2 cards with left accent + check lists ── */
.lp-srv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.lp-srv-card { background: #fff; border: 1px solid #E6EBF2; border-radius: 18px; padding: 2rem; position: relative; overflow: hidden; transition: transform 0.18s, box-shadow 0.18s; }
.lp-srv-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--primary); }
.lp-srv-card.lp-srv-green::before  { background: #16A34A; }
.lp-srv-card.lp-srv-orange::before { background: #F5821F; }
.lp-srv-card.lp-srv-purple::before { background: #7C3AED; }
.lp-srv-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px -20px rgba(8,36,94,0.4); }
.lp-srv-icon { width: 54px; height: 54px; border-radius: 14px; background: var(--primary-light); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 1.1rem; }
.lp-srv-green .lp-srv-icon  { background: #E9F9EF; }
.lp-srv-orange .lp-srv-icon { background: #FEF1E3; }
.lp-srv-purple .lp-srv-icon { background: #F1ECFD; }
.lp-srv-card h3 { font-size: 1.2rem; font-weight: 800; color: #0f172a; margin-bottom: 0.6rem; }
.lp-srv-card > p { font-size: 0.92rem; color: #475569; line-height: 1.6; margin-bottom: 1.1rem; }
.lp-srv-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 0.55rem; }
.lp-srv-list li { font-size: 0.88rem; color: #374151; padding-left: 1.6rem; position: relative; line-height: 1.45; }
.lp-srv-list li::before { content: '✓'; position: absolute; left: 0; color: #16A34A; font-weight: 800; }
.lp-srv-actions { display: flex; gap: 0.85rem; align-items: center; flex-wrap: wrap; }
.lp-srv-btn-primary { background: var(--primary); color: #fff; border: none; border-radius: 9px; padding: 0.6rem 1.3rem; font-weight: 700; font-size: 0.88rem; cursor: pointer; font-family: inherit; transition: background 0.15s; }
.lp-srv-btn-primary:hover { background: var(--primary-dark); }
.lp-srv-btn-ghost { color: var(--primary); font-weight: 700; font-size: 0.88rem; text-decoration: none; }
.lp-srv-btn-ghost:hover { text-decoration: underline; }

/* ── How it works — proctur numbered icon tiles ── */
.lp-how-icon-wrap { position: relative; width: 72px; height: 72px; border-radius: 18px; background: var(--brand-grad); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; box-shadow: 0 12px 28px -10px rgba(20,113,216,0.6); }
.lp-how-num { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; background: #F5821F; color: #fff; font-size: 0.72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #F4F7FC; }

/* ── Split section — dark navy + report card ── */
.lp-split-section { background: linear-gradient(135deg, #061a45, #08245E 60%, #0E4FA6); }
.lp-split-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.lp-split-copy { color: #fff; }
.lp-split-copy .lp-section-eyebrow { color: #7DD3FC; }
.lp-split-title { font-size: 2.2rem; font-weight: 800; line-height: 1.2; margin-bottom: 1rem; letter-spacing: -0.5px; }
.lp-split-title em { font-style: normal; color: #FBBF77; }
.lp-split-copy > p { font-size: 1rem; color: rgba(255,255,255,0.8); line-height: 1.7; margin-bottom: 1.5rem; }
.lp-split-checklist { list-style: none; padding: 0; margin: 0 0 1.75rem; display: flex; flex-direction: column; gap: 0.7rem; }
.lp-split-checklist li { font-size: 0.92rem; color: rgba(255,255,255,0.9); display: flex; gap: 0.6rem; align-items: flex-start; line-height: 1.5; }
.lp-chk { color: #34D399; font-weight: 800; flex-shrink: 0; }
.lp-split-cta { background: #F5821F; color: #fff; border: none; border-radius: 11px; padding: 0.9rem 1.8rem; font-weight: 700; font-size: 0.98rem; cursor: pointer; font-family: inherit; transition: background 0.15s; }
.lp-split-cta:hover { background: #DA6E0F; }
.lp-split-visual { display: flex; justify-content: center; }

/* ── Key Advantages — 3 centred cards ── */
.lp-adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.lp-adv-card { background: #fff; border: 1px solid #E6EBF2; border-radius: 18px; padding: 2rem; text-align: center; transition: transform 0.18s, box-shadow 0.18s; }
.lp-adv-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px -20px rgba(8,36,94,0.4); }
.lp-adv-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--primary-light); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin: 0 auto 1.25rem; }
.lp-adv-card h3 { font-size: 1.1rem; font-weight: 800; color: #0f172a; margin-bottom: 0.6rem; }
.lp-adv-card p { font-size: 0.9rem; color: #475569; line-height: 1.65; }

/* ── Powerful Features — dark navy band ── */
.lp-features-dark-section { background: radial-gradient(900px 400px at 80% 0%, rgba(20,113,216,0.4), transparent 60%), linear-gradient(135deg, #061a45, #08245E); padding: 5rem 2rem; }
.lp-features-dark-section .lp-section-inner { text-align: center; max-width: 1100px; margin: 0 auto; }
.lp-section-eyebrow-light { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #7DD3FC; display: block; margin-bottom: 0.6rem; }
.lp-section-title-light { font-size: 2.4rem; font-weight: 800; letter-spacing: -1px; line-height: 1.15; color: #fff; margin-bottom: 1rem; }
.lp-section-title-light em { font-style: normal; }
.lp-section-sub-light { font-size: 1rem; color: rgba(255,255,255,0.7); line-height: 1.7; max-width: 600px; margin: 0 auto; }
.lp-dark-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; text-align: left; }
.lp-dark-feat-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 1.6rem; transition: background 0.18s; }
.lp-dark-feat-card:hover { background: rgba(255,255,255,0.1); }
.lp-dark-feat-icon { font-size: 1.8rem; margin-bottom: 0.8rem; }
.lp-dark-feat-card h3 { font-size: 1.02rem; font-weight: 700; color: #fff; margin-bottom: 0.4rem; }
.lp-dark-feat-card p { font-size: 0.86rem; color: rgba(255,255,255,0.65); line-height: 1.6; }
.lp-dark-cta-btn { background: #F5821F; color: #fff; border: none; border-radius: 12px; padding: 1rem 2.2rem; font-weight: 700; font-size: 1rem; cursor: pointer; font-family: inherit; box-shadow: 0 12px 30px -10px rgba(245,130,31,0.7); transition: background 0.15s; }
.lp-dark-cta-btn:hover { background: #DA6E0F; }

/* ── Proctur components — responsive ── */
@media (max-width: 860px) {
  .lp-srv-grid { grid-template-columns: 1fr; }
  .lp-adv-grid { grid-template-columns: 1fr; }
  .lp-dark-feat-grid { grid-template-columns: 1fr; }
  .lp-split-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .lp-section-title-light { font-size: 1.8rem; }
  .lp-split-title { font-size: 1.7rem; }
}
@media (max-width: 560px) {
  /* Hero mobile optimization */
  .lp-hero-section { min-height: 500px; background-attachment: scroll; }
  .lp-hero-inner { padding: 3rem 1.25rem 2.5rem; }
  .lp-hero-title { font-size: 1.8rem; letter-spacing: -0.7px; line-height: 1.15; }
  .lp-hero-sub { font-size: 0.9rem; margin-bottom: 1rem; }
  .lp-hero-cta-row { flex-direction: column; gap: 0.75rem; }
  .lp-btn-hero-primary, .lp-btn-hero-secondary { width: 100%; text-align: center; }
  .lp-hero-checklist { gap: 0.35rem 0.8rem; margin-top: 0.75rem; }
  .lp-hero-checklist span { font-size: 0.75rem; }

  .lp-srv-card, .lp-adv-card { padding: 1.5rem; }
  .lp-features-dark-section { padding: 3.5rem 1.25rem; }
}

/* ══════════════════════════════════════════════════════════════
   MODERN REDESIGN — v32
   ══════════════════════════════════════════════════════════════ */

/* ── Scroll-reveal animations ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.22s; }
.reveal-delay-3 { transition-delay: 0.32s; }

/* ── Improved hero overlay — stronger left gradient for readability ── */
.lp-hero-overlay {
  background: linear-gradient(110deg, rgba(8,36,94,0.88) 0%, rgba(8,36,94,0.72) 50%, rgba(8,36,94,0.38) 100%) !important;
}

/* ── Hero badge pulse ── */
.lp-badge-accent {
  animation: badge-pulse 3s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,130,31,0.5); }
  50% { box-shadow: 0 0 0 7px rgba(245,130,31,0); }
}

/* ── Hero checklist items — subtle glow on the check ── */
.lp-hero-checklist span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 0.25rem 0.75rem;
  font-size: 0.82rem;
  backdrop-filter: blur(4px);
  transition: background 0.2s;
}
.lp-hero-checklist span:hover { background: rgba(255,255,255,0.2); }

/* ── Section eyebrow — accent line ── */
.lp-section-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 0.55rem;
}
.lp-section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}
.lp-section-eyebrow-light::before {
  background: rgba(245,130,31,0.9);
}

/* ── Improved service cards ── */
.lp-srv-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  border: 1px solid rgba(0,0,0,0.06);
}
.lp-srv-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 28px 56px -20px rgba(8,36,94,0.28);
}

/* ── Improved advantage cards ── */
.lp-adv-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s;
}
.lp-adv-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px -18px rgba(20,113,216,0.3);
  border-color: rgba(20,113,216,0.2);
}
.lp-adv-icon {
  transition: transform 0.22s ease;
}
.lp-adv-card:hover .lp-adv-icon { transform: scale(1.1) rotate(-5deg); }

/* ── Premium testimonial cards ── */
.lp-testi-card {
  background: #fff !important;
  border: 1.5px solid #e8edf5 !important;
  border-radius: 20px !important;
  padding: 2rem !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  box-shadow: 0 2px 12px rgba(8,36,94,0.06) !important;
}
.lp-testi-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 52px -18px rgba(20,113,216,0.22) !important;
}
.lp-testi-card::before {
  content: '\201C';
  position: absolute;
  top: 0.75rem;
  right: 1.25rem;
  font-size: 5rem;
  line-height: 1;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--primary-light);
  font-weight: 900;
  pointer-events: none;
}
.lp-testi-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 20px 20px 0 0;
  opacity: 0;
  transition: opacity 0.25s;
}
.lp-testi-card:hover::after { opacity: 1; }
.lp-testi-stars { color: #F59E0B !important; font-size: 1rem !important; letter-spacing: 2px; margin-bottom: 1rem !important; }
.lp-testi-quote { font-size: 0.9rem !important; color: #374151 !important; line-height: 1.8 !important; }
.lp-testi-avatar {
  background: var(--brand-grad) !important;
  box-shadow: 0 3px 10px rgba(20,113,216,0.3);
}

/* ── Animated CTA band gradient ── */
.lp-cta-band {
  background: linear-gradient(135deg, #06195a 0%, #1471D8 45%, #0e3d96 100%) !important;
  background-size: 200% 200% !important;
  animation: cta-gradient-shift 8s ease infinite;
}
@keyframes cta-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Improved dark features section cards ── */
.lp-dark-feat-card {
  transition: transform 0.22s ease, background 0.22s ease !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.lp-dark-feat-card:hover {
  transform: translateY(-5px) !important;
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(245,130,31,0.3) !important;
}

/* ── How it works — step hover ── */
.lp-how-step {
  transition: transform 0.22s ease;
}
.lp-how-step:hover { transform: translateY(-4px); }
.lp-how-icon-wrap {
  transition: box-shadow 0.22s ease;
}
.lp-how-step:hover .lp-how-icon-wrap {
  box-shadow: 0 8px 24px rgba(20,113,216,0.25);
}

/* ── JD input section ── */
.jd-section { margin: 1rem 0 0.5rem; }
.jd-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  background: none;
  border: 1.5px dashed #cbd5e1;
  border-radius: 10px;
  padding: 0.65rem 1rem;
  font-size: 0.875rem;
  color: var(--primary);
  cursor: pointer;
  font-weight: 500;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  text-align: left;
}
.jd-toggle-btn:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}
.jd-toggle-btn.jd-toggle-open {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary-dark);
}
.jd-textarea {
  display: block;
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
  min-height: 90px;
  margin-top: 0.625rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: #fff;
  color: var(--text);
}
.jd-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(20,113,216,0.1);
}
.jd-char-count {
  text-align: right;
  font-size: 0.73rem;
  color: var(--text-2);
  margin-top: 0.25rem;
}

/* ── Roles grid — card hover elevation ── */
#lp-roles-grid .lp-role-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
#lp-roles-grid .lp-role-card:hover {
  transform: translateY(-5px) scale(1.02) !important;
  box-shadow: 0 16px 40px -12px rgba(20,113,216,0.3) !important;
}

/* ── Stats bar numbers — pop-in animation ── */
.lp-sstat strong {
  display: inline-block;
}
.lp-statsbar.animated .lp-sstat strong {
  animation: stat-pop 0.5s ease-out both;
}
@keyframes stat-pop {
  from { opacity: 0; transform: scale(0.65) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Testimonials grid — 2-col featured on large desktop ── */
@media (min-width: 1100px) {
  .lp-testi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.75rem !important;
  }
  .lp-testi-card:first-child {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    padding: 2.5rem !important;
  }
  .lp-testi-card:first-child .lp-testi-quote {
    font-size: 1rem !important;
    line-height: 1.85 !important;
  }
}

/* ── Floating feedback button + modal ── */
.float-feedback-btn {
  position: fixed; bottom: 1.5rem; right: 1.25rem; z-index: 120;
  background: var(--accent); color: #fff; border: none; border-radius: 50%;
  width: 48px; height: 48px; cursor: pointer; display: none;
  align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(245,130,31,0.45);
  transition: transform 0.18s, box-shadow 0.18s;
}
.float-feedback-btn:hover { transform: scale(1.1); box-shadow: 0 6px 22px rgba(245,130,31,0.55); }
body.interview-active .float-feedback-btn { display: flex; }

.feedback-modal {
  position: fixed; bottom: 5.5rem; right: 1.25rem; z-index: 130;
  width: min(340px, calc(100vw - 2rem));
}
.feedback-modal-card {
  background: #fff; border-radius: 16px; padding: 1.25rem;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18); border: 1px solid var(--border);
  animation: feedbackSlideUp 0.2s ease;
}
@keyframes feedbackSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.feedback-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.feedback-modal-title { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.feedback-modal-close { background: none; border: none; cursor: pointer; color: var(--text-2); font-size: 1rem; padding: 0.1rem 0.3rem; }
.feedback-stars { display: flex; gap: 0.25rem; margin-bottom: 0.875rem; }
.fstar {
  background: none; border: none; cursor: pointer; font-size: 1.9rem;
  color: #D1D5DB; transition: color 0.12s; line-height: 1; padding: 0;
}
.fstar.active, .fstar:hover { color: #F59E0B; }
.feedback-comment {
  width: 100%; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 0.625rem 0.75rem; font-size: 0.85rem; font-family: inherit;
  resize: none; margin-bottom: 0.875rem;
  transition: border-color 0.15s;
}
.feedback-comment:focus { outline: none; border-color: var(--primary); }
.feedback-submit-btn { width: 100%; padding: 0.7rem; font-size: 0.9rem; }

/* ── Improvement vs previous attempt ── */
.improvement-section {
  background: linear-gradient(135deg, #ECFDF5 0%, #F0FDF4 100%);
  border: 1.5px solid #A7F3D0; border-radius: 14px; padding: 1.25rem 1.4rem;
}
.improvement-headline { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1rem; }
.imp-scores { display: flex; align-items: baseline; gap: 0.5rem; font-weight: 800; font-size: 1.6rem; }
.imp-prev { color: #9CA3AF; }
.imp-arrow { font-size: 1.2rem; }
.imp-denom { font-size: 0.9rem; color: #9CA3AF; font-weight: 600; }
.imp-delta { font-size: 0.9rem; font-weight: 700; }
.improvement-dims { display: flex; flex-direction: column; gap: 0.4rem; }
.imp-dim-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.88rem; color: #374151; padding: 0.35rem 0; border-top: 1px solid rgba(16,185,129,0.15); }
.imp-dim-vals { font-variant-numeric: tabular-nums; }

/* ── Free report → practice-again upsell ── */
.report-upsell {
  margin: 1.5rem 0 0.5rem;
  padding: 1.5rem;
  border-radius: 16px;
  text-align: center;
  background: linear-gradient(135deg, #EEF2FF 0%, #EAF2FD 100%);
  border: 1.5px solid #C7D2FE;
}
.report-upsell-badge {
  display: inline-block;
  background: var(--green-light); color: var(--green-text);
  font-size: 0.75rem; font-weight: 700;
  padding: 0.25rem 0.7rem; border-radius: 20px; margin-bottom: 0.75rem;
}
.report-upsell-title { font-size: 1.2rem; font-weight: 800; color: var(--navy); margin-bottom: 0.4rem; }
.report-upsell-sub { font-size: 0.9rem; color: var(--text-2); line-height: 1.6; margin-bottom: 1.1rem; max-width: 420px; margin-left: auto; margin-right: auto; }
.report-upsell-btn { width: auto; min-width: 240px; padding: 0.85rem 1.5rem; font-size: 1rem; }

/* ── iOS tap-to-start overlay ── */
.ios-tap-overlay {
  position: absolute; inset: 0; z-index: 200;
  background: rgba(8,36,94,0.92);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.ios-tap-card {
  background: #fff; border-radius: 20px; padding: 2.5rem 2rem;
  text-align: center; max-width: 320px; width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.ios-tap-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.ios-tap-title { font-size: 1.2rem; font-weight: 700; color: var(--text); margin-bottom: 0.4rem; }
.ios-tap-sub { font-size: 0.875rem; color: var(--text-2); margin-bottom: 1.5rem; }
.ios-tap-btn {
  background: var(--primary); color: #fff; border: none;
  border-radius: 12px; padding: 0.9rem 2rem; font-size: 1rem;
  font-weight: 700; cursor: pointer; width: 100%;
  font-family: inherit;
}

/* ── Pricing cards — elevated on hover ── */
.lp-pricing-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}
.lp-pricing-card:hover {
  transform: translateY(-5px);
}

/* ══════════════════════════════════════════════════════════════
   MOBILE INTERVIEW UX — v33
   ══════════════════════════════════════════════════════════════ */

/* ── Mobile how-to strip ── */
.mobile-how-to {
  background: linear-gradient(90deg, #08245E 0%, #1471D8 100%);
  color: #fff;
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  font-weight: 500;
  position: relative;
}
.mht-step { display: flex; align-items: center; gap: 0.3rem; }
.mht-num {
  background: rgba(255,255,255,0.25);
  border-radius: 50%;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; flex-shrink: 0;
}
.mht-sep { opacity: 0.5; font-size: 0.75rem; }
.mht-close {
  position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: rgba(255,255,255,0.7);
  font-size: 0.85rem; cursor: pointer; padding: 0.25rem;
}

/* ── Record button — bigger and more inviting on mobile ── */
@media (max-width: 640px) {
  .btn-record {
    padding: 1.1rem 1.5rem;
    border-radius: 16px;
    font-size: 1rem;
  }
  .btn-record:not(:disabled) {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 6px 20px rgba(20,113,216,0.35);
    animation: record-ready-pulse 2.5s ease-in-out infinite;
  }
  @keyframes record-ready-pulse {
    0%, 100% { box-shadow: 0 6px 20px rgba(20,113,216,0.35); }
    50% { box-shadow: 0 6px 28px rgba(20,113,216,0.55); }
  }
  .btn-record:not(:disabled) .record-ring {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.6);
  }
  .btn-record:not(:disabled) .record-ring svg { stroke: #fff; }
  .btn-record.recording {
    animation: record-pulse 1.5s ease-in-out infinite !important;
  }
  .record-ring { width: 44px; height: 44px; }
  #record-label { font-size: 1rem; }

  /* ── Question bubble mobile ── */
  .question-bubble {
    padding: 1rem 1.1rem 0.85rem;
    margin-bottom: 1rem;
  }
  .question-text { font-size: 1rem; line-height: 1.7; }
  .replay-question-btn {
    font-size: 0.82rem;
    padding: 0.4rem 0.85rem;
    margin-top: 0.75rem;
  }

  /* ── Interview QA spacing ── */
  .interview-qa-section { padding: 1rem 1rem 5rem; }
  .voice-answer-area { margin-top: 0.25rem; }
  .record-btn-wrap { padding: 0.25rem 0; gap: 0.5rem; }
  #next-btn { margin-top: 0.5rem !important; padding: 0.9rem 1.5rem; font-size: 1rem; }

  /* ── Disabled next button hint ── */
  .next-btn-hint {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-2);
    margin-top: 0.375rem;
  }

  /* ── Topbar mobile ── */
  .interview-topbar {
    padding: 0.5rem 0.75rem;
  }
  .btn-save-interview {
    font-size: 0.72rem;
    padding: 0.3rem 0.6rem;
  }
  .btn-fullscreen { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   VOICE-FIRST INTERVIEW — v34 (audio recording + question toggle)
   ══════════════════════════════════════════════════════════════ */

/* ── Question: listen-first, text hidden behind a toggle ── */
.question-listen-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.show-question-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.show-question-btn:hover { border-color: var(--primary); color: var(--primary); }
.show-question-btn.active { background: var(--primary-light); border-color: var(--primary); color: var(--primary-dark); }
.question-text { margin-top: 0.85rem; }

/* ── Recording timer + states ── */
.rec-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #DC2626;
  margin-top: 0.6rem;
  font-variant-numeric: tabular-nums;
}
.rec-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: #EF4444;
  animation: rec-blink 1s ease-in-out infinite;
}
@keyframes rec-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.rec-uploading {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-size: 0.88rem; color: var(--text-2); margin-top: 0.6rem; font-weight: 500;
}

/* ── Recorded confirmation card ── */
.voice-recorded-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--green-light);
  border: 1.5px solid #A7F3D0;
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.75rem;
}
.voice-recorded-info {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.92rem; font-weight: 600; color: var(--green-text);
}
.voice-recorded-check {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9rem; flex-shrink: 0;
}
.voice-recorded-dur { color: #047857; font-weight: 500; font-size: 0.85rem; }

/* Recording state — red button */
.btn-record.recording {
  background: #FEF2F2 !important;
  border-color: #EF4444 !important;
  color: #DC2626 !important;
}
.btn-record.recording .record-ring {
  background: #EF4444 !important;
  border-color: #EF4444 !important;
}
.btn-record.recording .record-ring svg { stroke: #fff !important; }

@media (max-width: 640px) {
  .voice-recorded-wrap { padding: 0.8rem 1rem; }
  .voice-recorded-info { font-size: 0.88rem; }
  .show-question-btn { font-size: 0.8rem; padding: 0.4rem 0.75rem; }
}

/* ══════════════════════════════════════════════════════════════
   INTERVIEW REDESIGN — v35 (clean cards, clear record states)
   ══════════════════════════════════════════════════════════════ */

.interview-qa-section { background: #F4F6FB; }
.interview-qa-inner { max-width: 560px; margin: 0 auto; width: 100%; padding-top: 0.5rem; }

/* ── Cards ── */
.iv-card {
  background: #fff;
  border: 1px solid #E6EAF2;
  border-radius: 18px;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 2px 10px rgba(8,36,94,0.05);
  margin-bottom: 1rem;
}
.iv-card-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
}
.iv-q-badge {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--primary);
  background: var(--primary-light); padding: 0.35rem 0.7rem; border-radius: 8px;
}
.iv-q-actions { display: flex; gap: 0.5rem; }
.iv-ghost-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: #fff; border: 1.5px solid #E2E8F0; border-radius: 9px;
  padding: 0.4rem 0.7rem; font-size: 0.8rem; font-weight: 600;
  color: #475569; cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.iv-ghost-btn:hover { border-color: var(--primary); color: var(--primary); }
.iv-ghost-btn.active { background: var(--primary-light); border-color: var(--primary); color: var(--primary-dark); }

.iv-question-card .question-text {
  font-size: 1.15rem; font-weight: 600; line-height: 1.6; color: #0f172a;
  margin: 1rem 0 0; display: none;
}

/* AI speaking indicator */
.ai-speaking-indicator {
  display: flex; align-items: center; gap: 0.4rem; margin-top: 1rem;
  color: var(--primary); font-size: 0.9rem; font-weight: 600;
}
.ai-speaking-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); animation: ai-dot 1.2s ease-in-out infinite; }
.ai-speaking-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-speaking-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes ai-dot { 0%,100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }

/* ── Answer card ── */
.iv-answer-card { padding-top: 1.1rem; }
.iv-card-label {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: #94A3B8; margin-bottom: 1rem;
}

/* Record stage — centred big circular button */
.record-stage { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; padding: 0.5rem 0 0.25rem; }

.rec-circle {
  position: relative;
  width: 92px; height: 92px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--brand-grad);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px -6px rgba(20,113,216,0.55);
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.rec-circle:not(:disabled):hover { transform: scale(1.05); }
.rec-circle:disabled { background: #CBD5E1; box-shadow: none; cursor: default; }
.rec-circle .rec-stop-icon { display: none; }
/* Ready-to-record: calm static ring (no continuous blinking) */
.rec-circle.ready::before {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid rgba(20,113,216,0.25);
}
/* Recording — red */
.rec-circle.recording {
  background: #EF4444;
  box-shadow: 0 0 0 0 rgba(239,68,68,0.5);
  animation: rec-pulse-red 1.4s ease-in-out infinite;
}
.rec-circle.recording .rec-mic-icon { display: none; }
.rec-circle.recording .rec-stop-icon { display: block; }
@keyframes rec-pulse-red {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
  50% { box-shadow: 0 0 0 14px rgba(239,68,68,0); }
}

.rec-stage-label { font-size: 0.95rem; font-weight: 600; color: #334155; text-align: center; }
.rec-circle.recording ~ .rec-stage-label { color: #DC2626; }

.rec-timer {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-size: 1.3rem; font-weight: 800; color: #DC2626; font-variant-numeric: tabular-nums;
}
.rec-dot { width: 11px; height: 11px; border-radius: 50%; background: #EF4444; animation: rec-blink 1s ease-in-out infinite; }
@keyframes rec-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

.rec-stop-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: #DC2626; color: #fff; border: none; border-radius: 12px;
  padding: 0.7rem 1.5rem; font-size: 0.95rem; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: background 0.15s;
  box-shadow: 0 6px 18px -6px rgba(220,38,38,0.6);
}
.rec-stop-btn:hover { background: #B91C1C; }

/* Uploading */
.rec-uploading {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-size: 0.9rem; color: var(--text-2); font-weight: 500; padding: 1rem 0;
}

/* Recorded playback */
.rec-playback { display: flex; flex-direction: column; gap: 0.85rem; }
.rec-playback-main {
  display: flex; align-items: center; gap: 0.85rem;
  background: var(--green-light); border: 1.5px solid #A7F3D0;
  border-radius: 14px; padding: 0.85rem 1rem;
}
.rec-play-btn {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: var(--green); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, background 0.15s;
}
.rec-play-btn:hover { transform: scale(1.07); background: #059669; }
.rec-playback-meta { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.rec-playback-meta strong { font-size: 0.92rem; color: var(--green-text); font-weight: 700; }
.rec-playback-dur { font-size: 0.82rem; color: #047857; }
.rec-saved-badge { font-size: 0.78rem; font-weight: 700; color: var(--green-text); }
.btn-rerecord {
  align-self: flex-start;
  background: none; border: 1.5px solid #E2E8F0; border-radius: 9px;
  padding: 0.55rem 1rem; font-size: 0.85rem; font-weight: 600;
  color: #475569; cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.btn-rerecord:hover { border-color: var(--primary); color: var(--primary); }

/* Type fallback */
.iv-answer-card .type-fallback { margin-top: 0.25rem; }
.iv-answer-card .answer-textarea {
  width: 100%; border: 1.5px solid #E2E8F0; border-radius: 12px;
  padding: 0.85rem 1rem; font-size: 0.95rem; font-family: inherit;
  line-height: 1.6; resize: vertical; min-height: 110px;
}
.iv-answer-card .answer-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(20,113,216,0.1); }
.answer-footer-row { display: flex; justify-content: center; margin-top: 0.85rem; }
.btn-type-toggle {
  background: none; border: none; color: var(--text-2);
  font-size: 0.85rem; font-weight: 600; cursor: pointer; font-family: inherit;
  padding: 0.35rem 0.5rem;
}
.btn-type-toggle:hover { color: var(--primary); }

/* Next button */
.iv-next-btn { width: 100%; padding: 0.95rem; font-size: 1rem; font-weight: 700; margin-top: 0.25rem; }
.next-btn-hint { text-align: center; font-size: 0.82rem; color: #DC2626; margin-top: 0.5rem; }

/* ── Feedback pill (noticeable, labelled) ── */
.float-feedback-btn {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  z-index: 120;
  display: none; align-items: center; gap: 0.5rem;
  background: var(--accent); color: #fff; border: none;
  border-radius: 30px; padding: 0.7rem 1.3rem;
  font-size: 0.9rem; font-weight: 700; font-family: inherit; cursor: pointer;
  box-shadow: 0 6px 18px -4px rgba(245,130,31,0.5);
  transition: transform 0.15s, box-shadow 0.2s, filter 0.15s;
}
.float-feedback-btn svg { flex-shrink: 0; }
.float-feedback-btn:hover { filter: brightness(1.05); transform: translateY(-2px); box-shadow: 0 10px 24px -4px rgba(245,130,31,0.6); }
body.interview-active .float-feedback-btn { display: inline-flex; }

.feedback-modal {
  position: fixed; bottom: 5rem; right: 1.5rem;
  z-index: 130; width: min(360px, calc(100vw - 2rem));
}

@media (max-width: 640px) {
  .float-feedback-btn { bottom: 1rem; right: 1rem; padding: 0.6rem 1.1rem; font-size: 0.85rem; }
  .feedback-modal { bottom: 4.25rem; right: 1rem; left: 1rem; width: auto; }
}

@media (max-width: 640px) {
  .iv-card { padding: 1.15rem 1.1rem; border-radius: 16px; }
  .iv-question-card .question-text { font-size: 1.05rem; }
  .rec-circle { width: 84px; height: 84px; }
  .iv-q-actions { gap: 0.4rem; }
  .iv-ghost-btn { padding: 0.4rem 0.6rem; font-size: 0.78rem; }
  .interview-qa-section { padding: 0.85rem 0.9rem 6rem; }
}

/* ══════════════════════════════════════════════════════════════
   INTERVIEW TRACKER — v40 (user portal, fully responsive)
   ══════════════════════════════════════════════════════════════ */
.tracker-shell { display:flex; flex-direction:column; gap:1.4rem; }
.tracker-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.tracker-sub { font-size:0.88rem; color:var(--text-2); margin:0; line-height:1.5; max-width:480px; }
.tracker-add-btn { width:auto; padding:0.7rem 1.4rem; font-size:0.9rem; white-space:nowrap; flex-shrink:0; }

/* Summary strip */
.tracker-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.tk-stat { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:0.1rem; box-shadow:0 1px 2px rgba(16,24,40,0.05); }
.tk-stat-num { font-size:1.8rem; font-weight:800; color:var(--text); line-height:1.1; }
.tk-stat-lbl { font-size:0.8rem; color:var(--text-2); font-weight:500; }

.tracker-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:1.1rem; }
.tk-card { background:#fff; border:1px solid #E6EAF2; border-radius:16px; padding:1.3rem 1.4rem; box-shadow:0 1px 2px rgba(8,36,94,0.05); display:flex; flex-direction:column; gap:1rem; transition:box-shadow .18s,transform .18s; }
.tk-card:hover { box-shadow:0 14px 36px -16px rgba(8,36,94,0.28); transform:translateY(-3px); }
.tk-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:0.6rem; }
.tk-id { display:flex; align-items:center; gap:0.75rem; min-width:0; }
.tk-badge { width:44px; height:44px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:1.2rem; }
.tk-card-title { display:flex; flex-direction:column; gap:0.12rem; min-width:0; }
.tk-card-title strong { font-size:1.08rem; font-weight:800; color:#0f172a; word-break:break-word; line-height:1.25; }
.tk-role { font-size:0.82rem; color:var(--text-2); }
.tk-stage { font-size:0.72rem; font-weight:700; padding:0.3rem 0.7rem; border-radius:20px; white-space:nowrap; flex-shrink:0; }
.tk-body { display:flex; flex-direction:column; gap:0.7rem; }
.tk-chances { display:flex; align-items:center; gap:0.6rem; font-size:0.78rem; color:var(--text-2); }
.tk-chances > span:first-child { flex-shrink:0; }
.tk-chances-bar { flex:1; height:7px; background:#E5E7EB; border-radius:4px; overflow:hidden; }
.tk-chances-bar > div { height:100%; background:linear-gradient(90deg,#1471D8,#0E4FA6); border-radius:4px; }
.tk-chances strong { color:#0f172a; font-size:0.82rem; }
.tk-date { display:flex; align-items:center; gap:0.45rem; font-size:0.82rem; font-weight:600; color:#0E4FA6; background:#EAF2FD; padding:0.5rem 0.7rem; border-radius:9px; }
.tk-date svg { width:15px; height:15px; flex-shrink:0; }
.tk-remark { font-size:0.85rem; color:#475569; line-height:1.55; margin:0; padding:0.65rem 0.8rem; background:#F8FAFC; border-radius:9px; border:1px solid #EEF2F7; }
.tk-actions { display:flex; gap:0.5rem; margin-top:auto; }
.tk-edit,.tk-delete { flex:1; border:1px solid #E2E8F0; background:#fff; border-radius:9px; padding:0.55rem; font-size:0.84rem; font-weight:600; cursor:pointer; font-family:inherit; transition:all .15s; }
.tk-edit { color:var(--primary); }
.tk-edit:hover { background:var(--primary-light); border-color:var(--primary); }
.tk-delete { color:#DC2626; }
.tk-delete:hover { background:#FEF2F2; border-color:#FECACA; }

/* "Add another" ghost tile */
.tk-add-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.3rem; min-height:180px; background:#F8FAFF; border:2px dashed #C7D7F0; border-radius:16px; cursor:pointer; font-family:inherit; color:var(--primary); transition:all .15s; text-align:center; padding:1rem; }
.tk-add-tile:hover { background:#EAF2FD; border-color:var(--primary); transform:translateY(-3px); }
.tk-add-plus { font-size:2rem; font-weight:300; line-height:1; width:48px; height:48px; border-radius:50%; background:#fff; border:1.5px solid #C7D7F0; display:flex; align-items:center; justify-content:center; color:var(--primary); margin-bottom:0.3rem; }
.tk-add-text { font-size:0.95rem; font-weight:700; color:var(--primary); }
.tk-add-sub { font-size:0.78rem; color:var(--text-2); font-weight:500; }

.tracker-empty { text-align:center; padding:3.5rem 1rem; background:var(--card); border:1px solid var(--border); border-radius:16px; }
.tracker-empty-illus { width:72px; height:72px; margin:0 auto 1rem; border-radius:18px; background:var(--primary-light); color:var(--primary); display:flex; align-items:center; justify-content:center; }
.tracker-empty-illus svg { width:36px; height:36px; }
.tracker-empty-title { font-size:1.2rem; font-weight:700; color:#0f172a; margin-bottom:0.4rem; }
.tracker-empty-sub { font-size:0.92rem; color:var(--text-2); max-width:440px; margin:0 auto 1.5rem; line-height:1.6; }
/* tracker modal */
.tracker-modal-box { max-width:560px; width:100%; }
.tracker-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.85rem; margin-top:0.5rem; }
.tracker-form-full { grid-column:1 / -1; }
.tracker-form-grid .form-group { margin:0; }
.tracker-form-grid input, .tracker-form-grid select, .tracker-form-grid textarea {
  width:100%; padding:0.65rem 0.75rem; border:1.5px solid var(--border); border-radius:10px; font-size:0.9rem; font-family:inherit; }
.tracker-form-grid input:focus, .tracker-form-grid select:focus, .tracker-form-grid textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(20,113,216,0.1); }
.tracker-reminder-note { font-size:0.8rem; color:#0E4FA6; background:#EAF2FD; padding:0.6rem 0.8rem; border-radius:8px; margin:1rem 0 0; }
@media (max-width:900px) {
  .tracker-stats { grid-template-columns:repeat(2,1fr); gap:0.8rem; }
  .tk-stat { padding:0.9rem 1rem; }
  .tk-stat-num { font-size:1.5rem; }
}
@media (max-width:560px) {
  .tracker-list { grid-template-columns:1fr; }
  .tracker-form-grid { grid-template-columns:1fr; }
  .tracker-add-btn { width:100%; }
  .tracker-header .btn { width:100% !important; }
}

/* ══════════════════════════════════════════════════════════════
   REWARDS & LEADERBOARD — v42
   ══════════════════════════════════════════════════════════════ */
.rw-wallet { display:flex; align-items:center; justify-content:space-between; gap:1rem; background:linear-gradient(135deg,#08245E 0%,#1471D8 100%); color:#fff; border-radius:18px; padding:1.5rem 1.75rem; margin:1.5rem 0; flex-wrap:wrap; }
.rw-points { font-size:2.6rem; font-weight:800; line-height:1; }
.rw-points-label { font-size:0.8rem; opacity:0.85; letter-spacing:0.05em; text-transform:uppercase; }
.rw-wallet-value { text-align:right; }
.rw-value { font-size:1.8rem; font-weight:800; color:#FBBF77; }
.rw-value-label { font-size:0.75rem; opacity:0.8; }
.rw-earn-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.85rem; margin-bottom:1.75rem; }
.rw-earn-card { background:#F8FAFC; border:1px solid #E6EAF2; border-radius:12px; padding:1rem; text-align:center; }
.rw-earn-pts { font-size:1.4rem; font-weight:800; color:var(--primary); }
.rw-earn-txt { font-size:0.8rem; color:var(--text-2); margin-top:0.25rem; line-height:1.4; }
.rw-section-title { font-size:1rem; font-weight:800; color:#0f172a; margin:0 0 0.85rem; }
.rw-invite { background:#FFFBEB; border:1px solid #FDE68A; border-radius:14px; padding:1.25rem; margin-bottom:1.75rem; }
.rw-invite-row { display:flex; gap:0.5rem; }
.rw-invite-row input { flex:1; min-width:0; border:1.5px solid #E2E8F0; border-radius:10px; padding:0.65rem 0.8rem; font-size:0.85rem; font-family:inherit; background:#fff; color:#374151; }
.rw-copy-btn { width:auto; padding:0.65rem 1.25rem; flex-shrink:0; }
.rw-invite-share { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; margin-top:0.85rem; flex-wrap:wrap; }
.rw-share-btn { border:none; border-radius:10px; padding:0.6rem 1.1rem; font-size:0.85rem; font-weight:700; cursor:pointer; font-family:inherit; }
.rw-wa { background:#25D366; color:#fff; }
.rw-code-chip { font-size:0.85rem; color:var(--text-2); }
.rw-code-chip strong { color:#0f172a; letter-spacing:0.05em; }
.rw-board-empty { color:var(--text-2); font-size:0.9rem; text-align:center; padding:1rem; line-height:1.55; }
.lb-row { display:flex; align-items:center; gap:0.85rem; padding:0.85rem 1rem; border:1px solid #E6EAF2; border-radius:12px; margin-bottom:0.6rem; background:#fff; }
.lb-row.lb-me { background:#EAF2FD; border-color:#BFDBFE; }
.lb-rank { font-size:1.1rem; font-weight:800; width:28px; text-align:center; flex-shrink:0; }
.lb-name { flex:1; font-weight:700; color:#0f172a; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-you { font-size:0.68rem; background:var(--primary); color:#fff; padding:0.1rem 0.45rem; border-radius:10px; font-weight:700; vertical-align:middle; }
.lb-score { font-size:0.85rem; font-weight:700; color:var(--primary); white-space:nowrap; }
.lb-pts { font-size:0.8rem; color:var(--text-2); white-space:nowrap; min-width:70px; text-align:right; }
@media (max-width:560px) {
  .rw-earn-grid { grid-template-columns:1fr; }
  .rw-wallet { padding:1.25rem; }
  .rw-points { font-size:2.2rem; }
  .lb-score { display:none; }
}

/* ── Redeem points row (payment screen) ── */
.redeem-points-row { display:flex; align-items:center; gap:0.6rem; background:#ECFDF5; border:1.5px solid #A7F3D0; border-radius:10px; padding:0.7rem 0.9rem; margin:0.75rem 0; cursor:pointer; font-size:0.9rem; color:#065F46; }
.redeem-points-row input { width:18px; height:18px; accent-color:#10B981; cursor:pointer; flex-shrink:0; }
.redeem-points-row strong { color:#047857; }

/* ============================================================
   APP SHELL — left sidebar + dashboard (logged-in users)
   ============================================================ */
.app-sidebar { display: none; }
.app-sidebar-overlay { display: none; }
.app-mobilebar { display: none; }

/* When app-shell is active: sidebar drives navigation */
body.app-shell .site-header { display: none !important; }
body.app-shell { background: var(--bg); }

body.app-shell .app-sidebar {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 248px;
  background: #0F2747;
  color: #E6EEF9;
  z-index: 1200;
  transition: width 0.18s ease, transform 0.22s ease;
  box-shadow: 2px 0 18px rgba(15,39,71,0.18);
}
body.app-shell main {
  margin-left: 248px;
  max-width: none;
  width: auto;
  padding: 2.25rem 2.75rem 3.5rem;
  transition: margin-left 0.18s ease;
}
/* Keep content readable but full-bleed on wide screens via inner wrappers */
body.app-shell .dash-wrap,
body.app-shell .profile-shell { max-width: 1500px; margin: 0 auto; }

/* Sidebar internals */
.as-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem 1rem 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.as-logo { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; overflow: hidden; }
.as-logo .logo-icon { width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0; }
.as-logo-text { font-weight: 700; font-size: 1.02rem; white-space: nowrap; color: #fff; }
.as-logo-text em { color: #6FB1FF; font-style: normal; }
.as-collapse {
  background: rgba(255,255,255,0.08); border: none; color: #cfe0f5;
  width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 1rem;
  flex-shrink: 0; line-height: 1;
}
.as-collapse:hover { background: rgba(255,255,255,0.16); }

.as-nav { flex: 1; overflow-y: auto; padding: 0.85rem 0.6rem; display: flex; flex-direction: column; gap: 0.12rem; }
.as-section-label {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: #7d97ba; padding: 0.85rem 0.7rem 0.3rem; font-weight: 700;
}
.as-item {
  display: flex; align-items: center; gap: 0.7rem;
  width: 100%; text-align: left; background: none; border: none;
  color: #cdddf0; font-size: 0.92rem; font-weight: 500;
  padding: 0.62rem 0.7rem; border-radius: 9px; cursor: pointer;
  text-decoration: none; transition: background 0.12s, color 0.12s; font-family: inherit;
}
.as-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.as-item.active { background: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(20,113,216,0.35); }
.as-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; flex-shrink: 0; }
.as-ic svg { width: 19px; height: 19px; }
.as-signout .as-ic svg { width: 18px; height: 18px; }
.as-lbl { white-space: nowrap; overflow: hidden; }

.as-bottom { padding: 0.8rem 0.6rem; border-top: 1px solid rgba(255,255,255,0.08); }
.as-user { font-size: 0.74rem; color: #8fa8c8; padding: 0 0.7rem 0.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-signout {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  background: rgba(255,255,255,0.06); border: none; color: #cdddf0;
  padding: 0.6rem 0.7rem; border-radius: 9px; cursor: pointer; font-size: 0.9rem; font-family: inherit;
}
.as-signout:hover { background: rgba(239,68,68,0.22); color: #fff; }

/* Collapsed (desktop icons-only) */
body.app-shell.sidebar-collapsed .app-sidebar { width: 66px; }
body.app-shell.sidebar-collapsed main { margin-left: 66px; }
body.app-shell.sidebar-collapsed .as-lbl,
body.app-shell.sidebar-collapsed .as-logo-text,
body.app-shell.sidebar-collapsed .as-section-label { display: none; }
body.app-shell.sidebar-collapsed .as-collapse { transform: rotate(180deg); }
body.app-shell.sidebar-collapsed .as-item { justify-content: center; padding: 0.62rem 0; }
body.app-shell.sidebar-collapsed .as-top { justify-content: center; }

/* ---- Dashboard ---- */
.dash-wrap { display: flex; flex-direction: column; gap: 1.4rem; }
.dash-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: linear-gradient(120deg, #0F2747 0%, #1471D8 100%);
  color: #fff; border-radius: 16px; padding: 1.6rem 1.8rem; flex-wrap: wrap;
}
.dash-eyebrow { font-size: 0.8rem; opacity: 0.85; margin: 0 0 0.2rem; }
.dash-title { font-size: 1.7rem; margin: 0; color: #fff; }
.dash-sub { font-size: 0.85rem; opacity: 0.8; margin: 0.3rem 0 0; }
.dash-hero-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.dash-stat {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 1.4rem 1.3rem; box-shadow: 0 1px 2px rgba(16,24,40,0.05);
  display: flex; flex-direction: column; gap: 0.15rem; transition: box-shadow 0.15s, transform 0.15s;
}
.dash-stat:hover { box-shadow: 0 8px 24px rgba(16,24,40,0.08); transform: translateY(-2px); }
.dash-stat-ic {
  width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.55rem;
}
.dash-stat-ic svg { width: 21px; height: 21px; }
.ic-blue   { background: #EAF2FD; color: #1471D8; }
.ic-amber  { background: #FEF3C7; color: #D97706; }
.ic-green  { background: #DCFCE7; color: #16A34A; }
.ic-violet { background: #EDE9FE; color: #7C3AED; }
.dash-stat-num { font-size: 1.95rem; font-weight: 800; color: var(--text); line-height: 1.1; }
.dash-stat-lbl { font-size: 0.82rem; color: var(--text-2); font-weight: 500; }
.dash-stat-sub { font-size: 0.72rem; color: var(--primary); font-weight: 700; }

.dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.dash-panel {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 1.5rem 1.6rem; box-shadow: 0 1px 2px rgba(16,24,40,0.05);
  display: flex; flex-direction: column;
}
.dash-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; }
.dash-panel-head h3 { margin: 0; font-size: 1.08rem; font-weight: 700; color: var(--text); }
.dash-link { background: none; border: none; color: var(--primary); font-size: 0.84rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.dash-link:hover { text-decoration: underline; }
.dash-panel-line { font-size: 0.9rem; color: var(--text-2); margin: 0 0 1.1rem; line-height: 1.55; flex: 1; }
.dash-panel-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: auto; }
.dash-mini-stats { display: flex; gap: 2rem; margin-top: 0.2rem; }
.dash-mini-stats > div { display: flex; flex-direction: column; }
.dash-mini-num { font-size: 1.7rem; font-weight: 800; color: var(--text); line-height: 1.1; }
.dash-mini-lbl { font-size: 0.78rem; color: var(--text-2); }

/* Dashboard: Speak & Improve promo */
.dash-speak-promo { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
  background: linear-gradient(120deg,#0F2747 0%,#7C3AED 100%); color: #fff; border-radius: 16px; padding: 1.4rem 1.6rem; margin-bottom: 1.1rem; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.dash-speak-promo:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -16px rgba(124,58,237,0.6); }
.dash-speak-promo-main { flex: 1; min-width: 240px; }
.dash-speak-badge { display: inline-block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; background: rgba(255,255,255,0.18); border-radius: 6px; padding: 0.18rem 0.5rem; margin-bottom: 0.5rem; }
.dash-speak-promo-main h3 { margin: 0 0 0.3rem; font-size: 1.3rem; color: #fff; }
.dash-speak-promo-main p { margin: 0; font-size: 0.9rem; opacity: 0.9; max-width: 560px; line-height: 1.5; }
.dash-speak-progress { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.8rem; font-size: 0.82rem; font-weight: 600; }
.dash-speak-bar { width: 180px; max-width: 50vw; height: 8px; background: rgba(255,255,255,0.25); border-radius: 5px; overflow: hidden; }
.dash-speak-bar > div { height: 100%; background: #fff; border-radius: 5px; transition: width 0.5s; }
.dash-speak-promo-cta { display: flex; align-items: center; gap: 1rem; }
.dash-speak-emoji { font-size: 2.4rem; }
.dash-speak-promo-cta .btn-primary { background: #fff; color: #4F2D9E; border: none; font-weight: 700; }
.dash-speak-promo-cta .btn-primary:hover { background: #f1ecff; }
@media (max-width: 560px) { .dash-speak-promo { padding: 1.2rem; } .dash-speak-emoji { display: none; } .dash-speak-promo-cta { width: 100%; } .dash-speak-promo-cta .btn { flex: 1; } }

/* Speak: certificate highlight banner (top of course) */
.speak-cert-banner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: linear-gradient(120deg,#15803D,#16A34A); color: #fff; border-radius: 14px; padding: 1rem 1.3rem; margin-bottom: 1rem; }
.speak-cert-ic { font-size: 2rem; }
.speak-cert-text { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.speak-cert-text strong { font-size: 1.05rem; }
.speak-cert-text span { font-size: 0.85rem; opacity: 0.92; }
.speak-cert-banner .btn-primary { background: #fff; color: #15803D; border: none; font-weight: 700; flex-shrink: 0; }

/* ---- Profile ---- */
.profile-shell { display: flex; flex-direction: column; gap: 1.3rem; }
.profile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.profile-title { font-size: 1.55rem; margin: 0; color: var(--text); }
.profile-subtitle { font-size: 0.9rem; color: var(--text-2); margin: 0.3rem 0 0; max-width: 560px; line-height: 1.5; }
.profile-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 1.6rem 1.8rem; box-shadow: 0 1px 2px rgba(16,24,40,0.05);
}
.profile-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.95rem 0; border-bottom: 1px solid var(--border); font-size: 0.94rem; }
.profile-row:last-child { border-bottom: none; }
.profile-row .pr-label { color: var(--text-2); flex-shrink: 0; }
.profile-row .pr-value { color: var(--text); font-weight: 600; text-align: right; word-break: break-word; }

.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.4rem; }
.pf-field { display: flex; flex-direction: column; }
.pf-field .field-label { margin-bottom: 0.4rem; }
.pf-span { grid-column: 1 / -1; }
.pf-hint { font-size: 0.74rem; color: var(--text-2); margin-top: 0.3rem; min-height: 0.9rem; }
.pf-hint.err { color: #DC2626; }
.pf-opt { font-weight: 400; color: var(--text-2); font-size: 0.8rem; }
.profile-grid textarea.text-input { resize: vertical; min-height: 90px; font-family: inherit; }
.profile-actions { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.5rem; }
.profile-saved { color: #16A34A; font-weight: 600; font-size: 0.88rem; }

/* Collapsed-rail icon centering */
body.app-shell.sidebar-collapsed .as-ic { width: auto; }

.app-mobilebar-brand { display: flex; align-items: center; gap: 0.55rem; }
.app-mobilebar-brand .logo-icon { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; object-position: left center; filter: brightness(0) invert(1); }

/* ---- Tablet / mobile ---- */
@media (max-width: 1100px) {
  body.app-shell main { padding: 2rem 1.5rem 3rem; }
  .dash-stats { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  body.app-shell .app-sidebar {
    transform: translateX(-100%);
    width: 272px;
  }
  body.app-shell.sidebar-open .app-sidebar { transform: translateX(0); box-shadow: 4px 0 30px rgba(0,0,0,0.35); }
  body.app-shell main { margin-left: 0; padding: 4.7rem 1rem 2.5rem; }
  body.app-shell .app-mobilebar {
    display: flex; align-items: center; gap: 0.7rem;
    position: fixed; top: 0; left: 0; right: 0; height: 56px;
    background: #0F2747; color: #fff; z-index: 1100; padding: 0 0.9rem;
    box-shadow: 0 2px 10px rgba(15,39,71,0.18);
  }
  body.app-shell .app-hamburger {
    background: rgba(255,255,255,0.12); border: none; color: #fff;
    width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  body.app-shell .app-hamburger svg { width: 22px; height: 22px; }
  body.app-shell .app-mobilebar-title { font-weight: 700; font-size: 1.02rem; }
  body.app-shell.sidebar-open .app-sidebar-overlay {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1150;
  }
  /* never collapse-to-icons on mobile; it's a drawer */
  body.app-shell.sidebar-collapsed .app-sidebar { width: 272px; }
  body.app-shell.sidebar-collapsed .as-lbl,
  body.app-shell.sidebar-collapsed .as-logo-text,
  body.app-shell.sidebar-collapsed .as-section-label { display: revert; }
  body.app-shell.sidebar-collapsed .as-item { justify-content: flex-start; padding: 0.62rem 0.7rem; }
  body.app-shell.sidebar-collapsed .as-ic { width: 22px; }
  .as-collapse { display: none; }

  .dash-stats { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  .dash-grid { grid-template-columns: 1fr; gap: 0.8rem; }
  .dash-hero { padding: 1.4rem; flex-direction: column; align-items: flex-start; }
  .dash-hero-actions { width: 100%; }
  .dash-hero-actions .btn { flex: 1; }
  .dash-title { font-size: 1.45rem; }
  .dash-stat { padding: 1.1rem 1rem; }
  .dash-stat-num { font-size: 1.6rem; }

  .profile-card { padding: 1.2rem 1.1rem; }
  .profile-grid { grid-template-columns: 1fr; gap: 1rem; }
  .profile-head { flex-direction: column; align-items: stretch; }
  .profile-head .btn { width: 100% !important; }
  .profile-row { flex-direction: column; gap: 0.25rem; }
  .profile-row .pr-value { text-align: left; }
}
@media (max-width: 420px) {
  .dash-stats { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   SPEAK & IMPROVE — English / communication practice
   ============================================================ */
.speak-shell { display: flex; flex-direction: column; gap: 1.4rem; max-width: 1100px; margin: 0 auto; }
.speak-hero {
  background: linear-gradient(120deg, #0F2747 0%, #7C3AED 100%);
  color: #fff; border-radius: 16px; padding: 1.7rem 1.9rem;
}
.speak-hero .dash-eyebrow { color: rgba(255,255,255,0.85); }
.speak-hero .dash-title { color: #fff; }
.speak-hero .dash-sub { color: rgba(255,255,255,0.85); max-width: 620px; }

.speak-level-block { margin-bottom: 1.6rem; }
.speak-level-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.9rem; }
.speak-level-head h3 { margin: 0; font-size: 1.15rem; color: var(--text); }
.speak-level-head p { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--text-2); }
.speak-level-badge {
  flex-shrink: 0; font-size: 0.72rem; font-weight: 700; padding: 0.3rem 0.7rem;
  border-radius: 20px; background: #EDE9FE; color: #6D28D9;
}
.speak-lesson-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.9rem; }
.speak-lesson {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 13px;
  padding: 1.1rem 1.3rem; cursor: pointer; font-family: inherit; text-align: left;
  font-size: 0.95rem; font-weight: 600; color: var(--text); transition: all 0.15s;
}
.speak-lesson:hover { border-color: #7C3AED; box-shadow: 0 10px 26px -14px rgba(124,58,237,0.4); transform: translateY(-2px); }
.speak-lesson-arrow { color: #7C3AED; font-size: 1.1rem; flex-shrink: 0; }

.as-badge { margin-left: auto; font-size: 0.6rem; font-weight: 700; background: #7C3AED; color: #fff; padding: 0.1rem 0.4rem; border-radius: 6px; }
body.app-shell.sidebar-collapsed .as-badge { display: none; }

.speak-back { background: none; border: none; color: var(--primary); font-weight: 600; font-size: 0.9rem; cursor: pointer; font-family: inherit; margin-bottom: 0.9rem; padding: 0; }
.speak-practice-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1.8rem; box-shadow: 0 1px 2px rgba(16,24,40,0.05); }
.speak-level-tag { font-size: 0.72rem; font-weight: 700; color: #6D28D9; background: #EDE9FE; padding: 0.25rem 0.65rem; border-radius: 20px; }
.speak-practice-title { font-size: 1.35rem; margin: 0.7rem 0 0.5rem; color: var(--text); }
.speak-prompt { font-size: 1.02rem; color: var(--text); line-height: 1.6; background: #F8FAFF; border-left: 3px solid #7C3AED; padding: 0.9rem 1.1rem; border-radius: 0 10px 10px 0; margin: 0 0 1rem; }
.speak-vocab { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.9rem; }
.speak-vocab-label { font-size: 0.8rem; color: var(--text-2); font-weight: 600; margin-right: 0.3rem; }
.speak-vocab-chip { font-size: 0.8rem; background: #EFF6FF; color: #1D4ED8; padding: 0.25rem 0.6rem; border-radius: 7px; font-weight: 500; }
.speak-tip { font-size: 0.86rem; color: #475569; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 10px; padding: 0.7rem 0.9rem; margin-bottom: 1.4rem; }

.speak-recorder { text-align: center; padding: 1rem 0 0.5rem; }
.speak-rec-btn {
  width: 84px; height: 84px; border-radius: 50%; border: none; cursor: pointer;
  background: #7C3AED; color: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px -6px rgba(124,58,237,0.5); transition: transform 0.15s;
}
.speak-rec-btn svg { width: 34px; height: 34px; }
.speak-rec-btn:hover { transform: scale(1.04); }
.speak-rec-btn.recording { background: #DC2626; animation: speakPulse 1.4s infinite; }
@keyframes speakPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.45); } 50% { box-shadow: 0 0 0 16px rgba(220,38,38,0); } }
.speak-rec-label { font-size: 0.92rem; color: var(--text-2); margin: 0.8rem 0 0.5rem; }
.speak-rec-timer { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-weight: 700; color: #DC2626; margin-bottom: 0.6rem; }
.speak-rec-dot { width: 9px; height: 9px; border-radius: 50%; background: #DC2626; animation: speakPulse 1.4s infinite; }
.speak-type-toggle { display: block; margin: 0.8rem auto 0; background: none; border: none; color: var(--text-2); font-size: 0.85rem; cursor: pointer; font-family: inherit; text-decoration: underline; }
.speak-type-box { margin-top: 1rem; }

.speak-analysing { text-align: center; padding: 2rem 0; color: var(--text-2); }
.speak-spinner { width: 38px; height: 38px; border: 3px solid #EDE9FE; border-top-color: #7C3AED; border-radius: 50%; margin: 0 auto 0.8rem; animation: speakSpin 0.8s linear infinite; }
@keyframes speakSpin { to { transform: rotate(360deg); } }

.speak-feedback { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1.8rem; margin-top: 1.2rem; box-shadow: 0 1px 2px rgba(16,24,40,0.05); }
.speak-fb-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.3rem; }
.speak-fb-head h3 { margin: 0; font-size: 1.15rem; color: var(--text); }
.speak-fb-head p { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--text-2); }
.speak-score-ring {
  width: 70px; height: 70px; border-radius: 50%; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; line-height: 1;
}
.speak-score-ring span { font-size: 1.6rem; font-weight: 800; }
.speak-score-ring small { font-size: 0.7rem; opacity: 0.85; }
.speak-score-ring.high { background: linear-gradient(135deg,#16A34A,#15803D); }
.speak-score-ring.mid  { background: linear-gradient(135deg,#2563EB,#1D4ED8); }
.speak-score-ring.low  { background: linear-gradient(135deg,#DC2626,#B91C1C); }

.speak-bars { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.2rem; }
.speak-bar-row { display: flex; align-items: center; gap: 0.8rem; }
.speak-bar-lbl { width: 92px; font-size: 0.85rem; color: var(--text-2); flex-shrink: 0; }
.speak-bar { flex: 1; height: 8px; background: #EEF1F6; border-radius: 5px; overflow: hidden; }
.speak-bar-fill { height: 100%; border-radius: 5px; transition: width 0.5s; }
.speak-bar-fill.high { background: #16A34A; }
.speak-bar-fill.mid { background: #2563EB; }
.speak-bar-fill.low { background: #DC2626; }
.speak-bar-num { width: 24px; text-align: right; font-weight: 700; font-size: 0.85rem; color: var(--text); }

.speak-filler { font-size: 0.9rem; color: var(--text); background: #F8FAFC; border-radius: 10px; padding: 0.7rem 0.9rem; margin-bottom: 1.1rem; }
.speak-filler-list { color: var(--text-2); }
.speak-tips { margin-bottom: 1.1rem; }
.speak-tips h4 { font-size: 0.95rem; margin: 0 0 0.5rem; color: var(--text); }
.speak-tips ul { margin: 0; padding-left: 1.2rem; }
.speak-tips li { font-size: 0.9rem; color: #475569; line-height: 1.6; margin-bottom: 0.3rem; }
.speak-corrected { background: #F5F3FF; border: 1px solid #DDD6FE; border-radius: 12px; padding: 1.1rem 1.2rem; margin-bottom: 1.2rem; }
.speak-corrected h4 { font-size: 0.95rem; margin: 0 0 0.5rem; color: #6D28D9; }
.speak-corrected-preview { font-size: 0.95rem; color: var(--text); font-style: italic; line-height: 1.6; margin: 0 0 0.7rem; }
.speak-locked { font-size: 0.84rem; color: #6D28D9; background: #fff; border: 1px dashed #C4B5FD; border-radius: 9px; padding: 0.6rem 0.8rem; }
.speak-soon { color: var(--text-2); }
.speak-fb-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

@media (max-width: 640px) {
  .speak-hero { padding: 1.3rem; }
  .speak-practice-card, .speak-feedback { padding: 1.2rem; }
  .speak-lesson-grid { grid-template-columns: 1fr; }
  .speak-bar-lbl { width: 78px; font-size: 0.8rem; }
  .speak-fb-actions .btn { flex: 1; }
}

/* Speak — Phase 2/3: stats, pro badge, detailed fixes */
.speak-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.speak-hero-side { text-align: right; }
.speak-pro-pill { display: inline-block; background: rgba(255,255,255,0.18); color: #fff; font-weight: 700; font-size: 0.8rem; padding: 0.3rem 0.8rem; border-radius: 20px; }
.speak-pro-until { display: block; font-size: 0.75rem; color: rgba(255,255,255,0.8); margin-top: 0.25rem; }

.speak-stats { display: grid; grid-template-columns: repeat(4, 1fr) 1.4fr; gap: 0.9rem; }
.speak-stat { background: var(--card); border: 1px solid var(--border); border-radius: 13px; padding: 1rem 1.1rem; box-shadow: 0 1px 2px rgba(16,24,40,0.05); }
.speak-stat-num { display: block; font-size: 1.5rem; font-weight: 800; color: var(--text); line-height: 1.1; }
.speak-stat-lbl { font-size: 0.76rem; color: var(--text-2); }
.speak-recent { background: var(--card); border: 1px solid var(--border); border-radius: 13px; padding: 0.8rem 1.1rem; box-shadow: 0 1px 2px rgba(16,24,40,0.05); }
.speak-recent-h { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-2); font-weight: 700; display: block; margin-bottom: 0.4rem; }
.speak-recent-row { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.82rem; color: var(--text); padding: 0.18rem 0; }
.speak-recent-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.speak-recent-row strong { color: var(--primary); flex-shrink: 0; }

.speak-corrected.pro { background: #F0FDF4; border-color: #BBF7D0; }
.speak-corrected.pro h4 { color: #15803D; }
.speak-corrected-full { font-size: 0.95rem; color: var(--text); line-height: 1.65; margin: 0; }
.speak-fixes { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.4rem; }
.speak-fix { display: flex; gap: 0.7rem; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.85rem; }
.speak-fix-type { flex-shrink: 0; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 6px; height: fit-content; background: #EDE9FE; color: #6D28D9; }
.speak-fix-type.grammar { background: #FEE2E2; color: #B91C1C; }
.speak-fix-type.vocabulary { background: #DBEAFE; color: #1D4ED8; }
.speak-fix-type.phrasing { background: #FEF3C7; color: #92400E; }
.speak-fix-line { font-size: 0.88rem; margin: 0; line-height: 1.5; }
.speak-fix-bad { color: #B91C1C; text-decoration: line-through; }
.speak-fix-good { color: #15803D; font-weight: 600; }
.speak-fix-why { font-size: 0.78rem; color: var(--text-2); margin: 0.2rem 0 0; }
.speak-locked p { margin: 0; }
.speak-coupon-row { display: flex; gap: 0.5rem; margin: 0.7rem 0 0.3rem; flex-wrap: wrap; }
.speak-coupon-row .text-input { max-width: 200px; text-transform: uppercase; }
.speak-coupon-msg { font-size: 0.82rem; margin: 0.2rem 0 0; min-height: 1rem; }
.speak-coupon-msg.ok { color: #15803D; }
.speak-coupon-msg.err { color: #DC2626; }
#speak-pay-price s { opacity: 0.7; font-weight: 400; }

/* ── Speak Pro course ── */
.speak-pro-section { background: var(--card); border: 1px solid #DDD6FE; border-radius: 16px; padding: 1.5rem 1.6rem; margin: 0.5rem 0 1.8rem; box-shadow: 0 1px 2px rgba(16,24,40,0.05); }
.speak-pro-head h3 { margin: 0; font-size: 1.25rem; color: var(--text); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.speak-pro-head p { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--text-2); }
.speak-pro-tag { font-size: 0.62rem; font-weight: 800; background: linear-gradient(120deg,#7C3AED,#1471D8); color: #fff; padding: 0.15rem 0.5rem; border-radius: 6px; letter-spacing: 0.05em; }
.speak-quick-heading { font-size: 1.1rem; margin: 0.5rem 0 0.2rem; color: var(--text); display: flex; align-items: center; gap: 0.5rem; }
.speak-free-tag { font-size: 0.62rem; font-weight: 700; background: #DCFCE7; color: #15803D; padding: 0.15rem 0.5rem; border-radius: 6px; }
.speak-quick-sub { font-size: 0.86rem; color: var(--text-2); margin: 0 0 1rem; }

.speak-pro-progress { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin: 1rem 0 1.2rem; font-size: 0.85rem; color: var(--text-2); font-weight: 600; }
.speak-pro-bar { flex: 1; min-width: 160px; height: 9px; background: #EDE9FE; border-radius: 5px; overflow: hidden; }
.speak-pro-bar > div { height: 100%; background: linear-gradient(90deg,#7C3AED,#1471D8); border-radius: 5px; transition: width 0.5s; }

.speak-pro-level { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 0.8rem; overflow: hidden; }
.speak-pro-level > summary { cursor: pointer; padding: 0.9rem 1.1rem; display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: var(--text); list-style: none; background: #FAFAFF; }
.speak-pro-level > summary::-webkit-details-marker { display: none; }
.speak-pro-level-title { font-size: 1rem; }
.speak-pro-level-meta { font-size: 0.82rem; color: var(--text-2); font-weight: 600; }
.speak-pro-level-focus { font-size: 0.84rem; color: var(--text-2); margin: 0.2rem 1.1rem 0.6rem; }
.speak-pro-module { padding: 0 1.1rem 0.6rem; }
.speak-pro-module-title { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #7C3AED; margin: 0.6rem 0 0.4rem; }
.speak-pro-lessons { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem; }
.speak-pro-lesson { display: flex; align-items: center; gap: 0.55rem; text-align: left; border: 1px solid var(--border); background: #fff; border-radius: 10px; padding: 0.6rem 0.7rem; font-family: inherit; font-size: 0.86rem; font-weight: 600; color: var(--text); cursor: pointer; transition: all 0.15s; }
.speak-pro-lesson.open:hover { border-color: #7C3AED; box-shadow: 0 6px 18px -10px rgba(124,58,237,0.5); transform: translateY(-1px); }
.speak-pro-lesson.done { background: #F0FDF4; border-color: #BBF7D0; }
.speak-pro-lesson.locked { opacity: 0.55; cursor: not-allowed; }
.speak-pro-lesson-ic { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.7rem; }
.speak-pro-lesson.done .speak-pro-lesson-ic { background: #16A34A; color: #fff; }
.speak-pro-lesson.open .speak-pro-lesson-ic { background: #EDE9FE; }
.speak-pro-lesson-title { line-height: 1.3; }
.speak-les-type { display: inline-block; font-size: 0.62rem; font-weight: 700; color: #1D4ED8; background: #EFF6FF; border-radius: 5px; padding: 0.05rem 0.35rem; margin-left: 0.35rem; vertical-align: middle; }

.speak-pro-locked { text-align: center; padding: 1.5rem 1rem 1.2rem; background: #F5F3FF; border-radius: 12px; margin: 1rem 0; }
.speak-pro-locked-ic { font-size: 1.8rem; }
.speak-pro-locked-title { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 0.4rem 0 0.3rem; }
.speak-pro-locked-sub { font-size: 0.88rem; color: var(--text-2); max-width: 480px; margin: 0 auto 1rem; line-height: 1.55; }
.speak-pro-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 0.6rem; opacity: 0.8; }
.speak-pro-preview-item { border: 1px dashed var(--border); border-radius: 10px; padding: 0.7rem; display: flex; flex-direction: column; gap: 0.15rem; }
.speak-pro-preview-item strong { font-size: 0.88rem; color: var(--text); }
.speak-pro-preview-item span { font-size: 0.78rem; color: var(--text-2); }

/* Pro lesson Learn card + model answer */
.speak-learn-card { background: #F8FAFF; border: 1px solid #E0E7FF; border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 0.9rem; }
.speak-learn-card h4 { margin: 0 0 0.4rem; font-size: 0.95rem; color: #4338CA; }
.speak-learn-card p { margin: 0; font-size: 0.9rem; color: var(--text); line-height: 1.55; }
.speak-model { background: #FFFDF5; border: 1px solid #FDE68A; border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 0.9rem; }
.speak-model h4 { margin: 0 0 0.4rem; font-size: 0.95rem; color: #92400E; display: flex; align-items: center; gap: 0.6rem; }
.speak-model p { margin: 0; font-size: 0.9rem; color: var(--text); font-style: italic; line-height: 1.55; }
.speak-model-play { font-size: 0.75rem; font-weight: 600; border: 1px solid #FCD34D; background: #fff; color: #92400E; border-radius: 7px; padding: 0.2rem 0.6rem; cursor: pointer; font-family: inherit; }

.speak-badge-won { background: #FEFCE8; border: 1px solid #FEF08A; color: #854D0E; border-radius: 10px; padding: 0.7rem 0.9rem; margin-bottom: 0.8rem; font-weight: 600; font-size: 0.9rem; }
.speak-badge-won.course { background: #F0FDF4; border-color: #BBF7D0; color: #15803D; }

/* ── LMS layout (nested collapsible course) ── */
.lms-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lms-ring-num { position: absolute; font-size: 0.7rem; font-weight: 800; color: var(--text); }
.lms-ring-num small { font-size: 0.55rem; font-weight: 700; }
.lms-bar { display: inline-block; height: 7px; background: #EDE9FE; border-radius: 5px; overflow: hidden; width: 100%; vertical-align: middle; }
.lms-bar > span { display: block; height: 100%; background: linear-gradient(90deg,#7C3AED,#1471D8); border-radius: 5px; transition: width 0.5s; }

.lms-overview { display: flex; align-items: center; gap: 1.1rem; background: #F8FAFF; border: 1px solid #E0E7FF; border-radius: 14px; padding: 1.1rem 1.3rem; margin: 1.1rem 0 1.4rem; }
.lms-overview .lms-ring-num { font-size: 1rem; }
.lms-overview-meta { flex: 1; min-width: 0; }
.lms-overview-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.15rem; }
.lms-overview-top strong { font-size: 1rem; color: var(--text); }
.lms-overview-meta p { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--text-2); }

.lms-levels { display: flex; flex-direction: column; gap: 0.8rem; }
.lms-level { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #fff; }
.lms-level > summary, .lms-module > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.8rem; }
.lms-level > summary::-webkit-details-marker, .lms-module > summary::-webkit-details-marker { display: none; }
.lms-level > summary { padding: 1rem 1.1rem; background: #FAFAFF; }
.lms-level[open] > summary { border-bottom: 1px solid var(--border); }
.lms-chev { width: 16px; height: 16px; flex-shrink: 0; border-right: 2px solid #94A3B8; border-bottom: 2px solid #94A3B8; transform: rotate(-45deg); transition: transform 0.18s; margin-right: -0.2rem; }
.lms-level[open] > summary .lms-chev, .lms-module[open] > summary .lms-chev { transform: rotate(45deg); }
.lms-level-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.lms-level-title { font-size: 1.02rem; font-weight: 700; color: var(--text); }
.lms-level-focus { font-size: 0.8rem; color: var(--text-2); }
.lms-level-count { font-size: 0.85rem; font-weight: 700; color: var(--text-2); flex-shrink: 0; }
.lms-badge-pill { font-size: 0.65rem; font-weight: 700; background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; border-radius: 20px; padding: 0.1rem 0.5rem; vertical-align: middle; }

.lms-modules { padding: 0.6rem 1.1rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.lms-module { border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }
.lms-module > summary { padding: 0.7rem 0.9rem; background: #fff; }
.lms-module-title { flex: 1; font-size: 0.92rem; font-weight: 600; color: var(--text); min-width: 0; }
.lms-module-prog { display: flex; align-items: center; gap: 0.5rem; width: 130px; flex-shrink: 0; }
.lms-module-prog .lms-bar { width: 80px; }
.lms-pct { font-size: 0.78rem; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.lms-module[open] > summary { border-bottom: 1px solid var(--border); }

.lms-lessons { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.5rem 0.7rem 0.7rem; }
.lms-lesson { display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left; background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 0.6rem 0.8rem; font-family: inherit; cursor: pointer; transition: all 0.13s; }
.lms-lesson.open:hover { border-color: #7C3AED; background: #FCFAFF; }
.lms-lesson.done { background: #F6FEF9; border-color: #C9F0D8; }
.lms-lesson.locked { opacity: 0.5; cursor: not-allowed; }
.lms-lesson-ic { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.72rem; font-weight: 700; background: #EDE9FE; color: #6D28D9; }
.lms-lesson.done .lms-lesson-ic { background: #16A34A; color: #fff; }
.lms-lesson.locked .lms-lesson-ic { background: #E5E7EB; color: #94A3B8; }
.lms-lesson.pro { cursor: pointer; opacity: 1; border-style: dashed; border-color: #DDD6FE; background: #FCFAFF; }
.lms-lesson.pro:hover { border-color: #7C3AED; }
.lms-lesson.pro .lms-lesson-ic { background: #EDE9FE; color: #7C3AED; }
.lms-lesson.pro .lms-lesson-title { color: var(--text-2); }
.lms-pro-pill { flex-shrink: 0; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; background: linear-gradient(120deg,#7C3AED,#1471D8); color: #fff; border-radius: 6px; padding: 0.12rem 0.4rem; }
.lms-free-tag { flex-shrink: 0; font-size: 0.6rem; font-weight: 700; background: #DCFCE7; color: #15803D; border-radius: 5px; padding: 0.08rem 0.4rem; }
.lms-pro-status { flex-shrink: 0; align-self: flex-start; font-size: 0.62rem; font-weight: 800; background: linear-gradient(120deg,#7C3AED,#1471D8); color: #fff; border-radius: 6px; padding: 0.12rem 0.45rem; }
.lms-pro-tagline { color: #7C3AED; font-weight: 700; }

.lms-unlock-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: linear-gradient(120deg,#0F2747,#7C3AED); color: #fff; border-radius: 14px; padding: 1.1rem 1.3rem; margin: 0 0 1.3rem; }
.lms-unlock-banner strong { font-size: 1.02rem; }
.lms-unlock-banner p { margin: 0.25rem 0 0; font-size: 0.85rem; opacity: 0.9; max-width: 520px; }
.lms-unlock-banner .btn { flex-shrink: 0; }
.lms-lesson-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.lms-lesson-title { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.lms-lesson-score { flex-shrink: 0; font-size: 0.76rem; font-weight: 700; color: #15803D; background: #F0FDF4; border-radius: 6px; padding: 0.1rem 0.45rem; }
.speak-les-type.topic { color: #6D28D9; background: #EDE9FE; }

@media (max-width: 560px) {
  .lms-overview { flex-direction: row; padding: 0.9rem; gap: 0.8rem; }
  .lms-level > summary { padding: 0.8rem 0.85rem; gap: 0.6rem; }
  .lms-level-focus { display: none; }
  .lms-module-prog { width: auto; }
  .lms-module-prog .lms-bar { display: none; }
}

/* Question + replay (ElevenLabs) */
.speak-prompt-row { display: flex; align-items: flex-start; gap: 0.7rem; }
.speak-prompt-row .speak-prompt { flex: 1; margin: 0 0 1rem; }
.speak-replay-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.4rem; background: #EDE9FE; color: #6D28D9; border: 1px solid #DDD6FE; border-radius: 9px; padding: 0.45rem 0.7rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s; }
.speak-replay-btn:hover { background: #DDD6FE; }
.speak-replay-btn svg { width: 16px; height: 16px; }
@media (max-width: 560px) { .speak-replay-btn span { display: none; } .speak-replay-btn { padding: 0.45rem 0.55rem; } }

@media (max-width: 760px) {
  .speak-stats { grid-template-columns: repeat(2, 1fr); }
  .speak-recent { grid-column: 1 / -1; }
}

/* ============================================================
   HOME BANNER CAROUSEL (admin-managed) + PATHS + ENQUIRY
   ============================================================ */
.home-banners { position: relative; width: 100%; max-width: 100%; margin: 0; padding: 0; overflow: hidden; }
.hb-track { display: flex; transition: transform 0.5s ease; }
.hb-cell { flex: 0 0 100%; max-width: 100%; text-decoration: none; }
.hb-slide { position: relative; width: 100%; border-radius: 0; overflow: hidden; background: #0F2747; }
/* Natural ratio = the FULL image is always shown, never cropped. The banner's
   height follows the image's own proportions. Use a wide desktop image
   (≈1600×450) so it isn't too tall; upload a separate mobile image for phones. */
.hb-img { width: 100%; height: auto; display: block; }
.hb-slide::after { content: ''; position: absolute; inset: 0; }
.hb-ov-dark .hb-img { filter: none; }
.hb-ov-dark::after { background: linear-gradient(90deg, rgba(8,15,35,0.65) 0%, rgba(8,15,35,0.15) 60%, transparent 100%); }
.hb-ov-light::after { background: linear-gradient(90deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.1) 60%, transparent 100%); }
.hb-ov-none::after { background: none; }
.hb-content { position: absolute; top: 50%; left: 5%; transform: translateY(-50%); max-width: 60%; z-index: 2; }
.hb-content h3 { font-size: clamp(1.1rem, 2.6vw, 1.9rem); font-weight: 800; margin: 0 0 0.4rem; line-height: 1.2; }
.hb-content p { font-size: clamp(0.82rem, 1.6vw, 1rem); margin: 0 0 0.9rem; line-height: 1.5; }
.hb-text-light h3, .hb-text-light p { color: #fff; }
.hb-text-dark h3 { color: #0F2747; } .hb-text-dark p { color: #334155; }
.hb-btn { display: inline-block; background: #F5821F; color: #fff; font-weight: 700; font-size: 0.88rem; padding: 0.55rem 1.2rem; border-radius: 9px; text-decoration: none; }
.hb-btn:hover { background: #DA6E0F; }
.hb-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,0.9); color: #0F2747; font-size: 1.4rem; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.2); }
.hb-prev { left: 1.4rem; } .hb-next { right: 1.4rem; }
.hb-arrow:hover { background: #fff; }
.hb-dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 4; display: flex; justify-content: center; gap: 0.4rem; }
.hb-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255,255,255,0.55); cursor: pointer; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.hb-dot.active { background: #fff; width: 22px; border-radius: 5px; }
@media (max-width: 640px) {
  .hb-content { max-width: 86%; left: 6%; }
  .hb-arrow { display: none !important; }
  .hb-dots { bottom: 10px; }
}

/* Path chooser */
.lp-paths-section { padding: 3rem 1rem 1rem; }
.lp-paths-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 980px; margin: 2rem auto 0; }
.lp-path-card { position: relative; background: #fff; border: 1.5px solid #E5E7EB; border-radius: 18px; padding: 2rem; text-align: center; box-shadow: 0 2px 12px rgba(16,24,40,0.05); transition: transform 0.15s, box-shadow 0.15s; }
.lp-path-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -18px rgba(20,113,216,0.35); }
.lp-path-card-speak { border-color: #DDD6FE; background: linear-gradient(180deg,#FCFAFF,#fff); }
.lp-path-badge { position: absolute; top: 1rem; right: 1rem; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; background: linear-gradient(120deg,#7C3AED,#1471D8); color: #fff; padding: 0.18rem 0.5rem; border-radius: 6px; }
.lp-path-icon { font-size: 2.4rem; margin-bottom: 0.6rem; }
.lp-path-card h3 { font-size: 1.25rem; margin: 0 0 0.5rem; color: #0F2747; }
.lp-path-card p { font-size: 0.92rem; color: #475569; line-height: 1.6; margin: 0 0 1.2rem; }
.lp-path-card .lp-btn-hero-primary { width: 100%; }
.lp-path-link { display: inline-block; margin-top: 0.7rem; font-size: 0.85rem; font-weight: 600; color: #1471D8; text-decoration: none; }
.lp-path-link:hover { text-decoration: underline; }
@media (max-width: 640px) { .lp-paths-grid { grid-template-columns: 1fr; } }

/* Nav "Enquire" button */
.lp-nav-enquire { background: transparent; border: 1.5px solid #E5E7EB; color: #374151; font-weight: 600; font-size: 0.85rem; padding: 0.45rem 0.9rem; border-radius: 8px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.lp-nav-enquire:hover { border-color: #1471D8; color: #1471D8; background: #EFF6FF; }

/* Enquiry modal */
.enquiry-card { max-width: 420px; }
.enquiry-title { font-size: 1.35rem; margin: 0 0 0.3rem; color: var(--text); }
.enquiry-sub { font-size: 0.9rem; color: var(--text-2); margin: 0 0 1.1rem; }
.enquiry-msg { font-size: 0.85rem; margin: 0.6rem 0 0; min-height: 1rem; }
.enquiry-msg.ok { color: #15803D; }
.enquiry-msg.err { color: #DC2626; }

.lp-testi-disclaimer { text-align:center; font-size:0.78rem; color:var(--text-2); margin-top:1.5rem; opacity:0.85; }
.dash-empty { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:2.5rem 1.5rem; text-align:center; box-shadow:0 1px 2px rgba(16,24,40,0.05); }
.dash-empty-ic { font-size:2.5rem; }
.dash-empty h3 { margin:0.5rem 0 0.4rem; font-size:1.3rem; color:var(--text); }
.dash-empty p { margin:0 auto 1.3rem; max-width:460px; color:var(--text-2); line-height:1.6; font-size:0.95rem; }
.dash-empty-actions { display:flex; gap:0.6rem; justify-content:center; flex-wrap:wrap; }

.speak-xsell { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:1.4rem; background:linear-gradient(120deg,#0F2747,#1471D8); color:#fff; border-radius:16px; padding:1.2rem 1.4rem; }
.speak-xsell-main { display:flex; align-items:center; gap:0.9rem; }
.speak-xsell-ic { font-size:1.8rem; }
.speak-xsell h3 { margin:0; font-size:1.05rem; color:#fff; }
.speak-xsell p { margin:0.2rem 0 0; font-size:0.86rem; opacity:0.9; max-width:480px; }
.speak-xsell .btn-primary { background:#fff; color:#0F2747; border:none; font-weight:700; flex-shrink:0; }

/* ── Homepage dual-product additions ── */
.lp-pricing-wrap-3 { grid-template-columns: 1fr 1fr 1fr; max-width: 1060px; }
.lp-pricing-speak-card { border: 1.5px solid #DDD6FE; background: linear-gradient(180deg,#FCFAFF,#fff); }
.lp-how-note { text-align: center; margin-top: 2rem; font-size: 0.92rem; color: var(--text-2); }
.lp-how-note a { color: var(--primary); font-weight: 600; text-decoration: none; }
.lp-split-cta-row { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.lp-split-cta-2 { background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.3); }
.lp-dark-cta-2 { background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.35); box-shadow: none; }
.lp-cta-band-btn-2 { background: rgba(255,255,255,0.15); color: #fff; border: 1.5px solid rgba(255,255,255,0.4); }
@media (max-width: 980px) { .lp-pricing-wrap-3 { grid-template-columns: 1fr; max-width: 440px; } }

/* ── Pricing: two plans per product ── */
.lp-pricing-product { max-width: 840px; margin: 2.25rem auto 0; }
.lp-pricing-product-title { font-size: 1.15rem; font-weight: 800; color: var(--text); text-align: center; margin: 0 0 1.1rem; }
.lp-pricing-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.lp-badge-purple { background: linear-gradient(90deg,#7C3AED,#1471D8) !important; }
.lp-pricing-speak-btn { background: #7C3AED !important; }
.lp-pricing-speak-btn:hover { background: #6D28D9 !important; }
@media (max-width: 720px) { .lp-pricing-pair { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } }

/* ── Brand logo (full wordmark image) ── */
/* 50px height so tagline sits below wordmark instead of cutting through it */
.lp-logo-full { height: 50px; width: auto; display: block; }
@media (max-width: 900px) { .lp-logo-full { height: 44px; } }
@media (max-width: 400px) { .lp-logo-full { height: 38px; } }
/* Dashboard sidebar: full wordmark when expanded, icon when collapsed */
/* filter:invert for dark sidebar background */
.as-logo-img { height: 38px; width: auto; display: block; filter: brightness(0) invert(1); }
.as-logo-iconly { display: none; width: 30px; height: 30px; border-radius: 7px; object-fit: cover; object-position: left center; filter: brightness(0) invert(1); }
body.app-shell.sidebar-collapsed .as-logo-img { display: none; }
body.app-shell.sidebar-collapsed .as-logo-iconly { display: block; }

/* ===========================================================
   MOCKUP REDESIGN — shared modern design system (mm-*)
   =========================================================== */
.mm-wrap { max-width: clamp(1200px, 88vw, 1600px); margin: 0 auto; padding: 0 24px; }
.mm-head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.mm-eyebrow { display: inline-block; background: #ede9fe; color: #7c3aed; font-weight: 700; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; padding: .42rem 1rem; border-radius: 30px; margin-bottom: 1.1rem; }
.mm-h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; letter-spacing: -1px; color: #0f172a; line-height: 1.1; margin: 0 0 1rem; }
.mm-h2 em { font-style: normal; color: #7c3aed; }
.mm-sub { font-size: 1.1rem; color: #64748b; line-height: 1.6; margin: 0; }
.mm-btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; border: none; cursor: pointer; border-radius: 12px; padding: .85rem 1.5rem; font-size: 1rem; transition: transform .15s, box-shadow .15s; text-decoration: none; line-height: 1; }
.mm-btn span { transition: transform .15s; }
.mm-btn:hover span { transform: translateX(3px); }
.mm-btn-primary { background: linear-gradient(135deg,#7c3aed,#5b21b6); color: #fff; box-shadow: 0 12px 26px -10px rgba(124,58,237,.7); }
.mm-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(124,58,237,.85); }
.mm-btn-orange { background: linear-gradient(135deg,#f97316,#ea580c); color: #fff; box-shadow: 0 12px 26px -10px rgba(249,115,22,.7); }
.mm-btn-orange:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(249,115,22,.85); }
.mm-btn-ghost { background: #fff; color: #7c3aed; border: 1.5px solid #ddd6fe; }
.mm-btn-ghost:hover { background: #faf5ff; }

/* waveform (CSS-only equalizer with a soft envelope mask) */
.mm-wave { display: inline-block; vertical-align: middle; color: #7c3aed; background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px); border-radius: 3px; -webkit-mask: radial-gradient(72% 130% at 50% 50%, #000 38%, transparent 100%); mask: radial-gradient(72% 130% at 50% 50%, #000 38%, transparent 100%); }
.mm-wave-sm { width: 86px; height: 16px; }
.mm-wave-lg { width: 100%; height: 26px; }

/* ── How it works ── */
.mm-hiw { padding: 5rem 0; background: #fff; }
.mm-hiw-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.4rem; align-items: start; }
@media (max-width: 900px) { .mm-hiw-grid { grid-template-columns: 1fr; gap: 1.8rem; } }

/* interview mock card */
.mm-iv-card { background: #fff; border: 1px solid #eef0f5; border-radius: 20px; box-shadow: 0 30px 60px -30px rgba(30,27,75,.3); overflow: hidden; }
.mm-iv-head { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.1rem; border-bottom: 1px solid #f1f2f7; }
.mm-iv-brand { display: flex; align-items: center; gap: .45rem; font-weight: 800; color: #0f172a; font-size: .92rem; }
.mm-iv-brand em { font-style: normal; color: #7c3aed; }
.mm-iv-headright { display: flex; align-items: center; gap: .7rem; }
.mm-iv-timer { display: flex; align-items: center; gap: .35rem; color: #475569; font-weight: 600; font-size: .82rem; }
.mm-iv-timer i { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; display: inline-block; }
.mm-iv-end { border: 1px solid #fecaca; color: #ef4444; font-weight: 600; font-size: .78rem; padding: .3rem .7rem; border-radius: 8px; }
.mm-iv-body { display: grid; grid-template-columns: .82fr 1.18fr; gap: 1rem; padding: 1.1rem; }
.mm-iv-ai-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; font-size: .85rem; color: #334155; }
.mm-iv-bot { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,#8b5cf6,#6d28d9); display: flex; align-items: center; justify-content: center; flex: none; }
.mm-iv-bubble { background: #f3f0fe; border-radius: 12px; padding: .7rem .8rem; font-weight: 600; color: #1e1b4b; font-size: .88rem; margin-bottom: .7rem; }
.mm-iv-listen { display: flex; align-items: center; gap: .5rem; color: #7c3aed; font-size: .8rem; font-weight: 600; }
.mm-iv-video { border-radius: 14px; overflow: hidden; background: #0f172a; min-height: 160px; }
.mm-iv-video img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 160px; }
.mm-iv-foot { padding: 0 1.1rem 1.3rem; }
.mm-iv-foot .mm-wave-lg { display: block; color: #c4b5fd; margin: .2rem 0 .7rem; }
.mm-iv-rec { display: flex; align-items: center; justify-content: space-between; color: #64748b; font-size: .82rem; margin-bottom: .85rem; }
.mm-iv-mic { width: 54px; height: 54px; border-radius: 50%; border: none; background: linear-gradient(135deg,#7c3aed,#5b21b6); box-shadow: 0 10px 22px -8px rgba(124,58,237,.7); cursor: default; display: flex; align-items: center; justify-content: center; margin: 0 auto; }

/* step cards */
.mm-steps { display: flex; flex-direction: column; }
.mm-step { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem 1rem; align-items: center; background: #fff; border: 1px solid #eef0f5; border-radius: 16px; padding: 1.15rem 1.3rem; box-shadow: 0 18px 40px -28px rgba(30,27,75,.28); }
.mm-step-ico { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px -10px rgba(99,102,241,.6); flex: none; }
.mm-step-tag { display: inline-block; background: #ede9fe; color: #7c3aed; font-weight: 700; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 20px; margin-bottom: .35rem; }
.mm-step-body h3 { margin: .1rem 0 .3rem; font-size: 1.1rem; color: #0f172a; font-weight: 800; }
.mm-step-body p { margin: 0; color: #64748b; font-size: .9rem; line-height: 1.45; }
.mm-step-extra { min-width: 140px; }
.mm-step-extra .mm-wave-sm { width: 100%; color: #a78bfa; }
.mm-mini-bubble { background: #f3f0fe; color: #1e1b4b; font-size: .72rem; font-weight: 600; padding: .35rem .55rem; border-radius: 8px; margin-bottom: .45rem; text-align: center; }
.mm-step-scores { display: flex; flex-direction: column; gap: .4rem; }
.mm-srow { font-size: .68rem; color: #475569; }
.mm-srow em { float: right; font-weight: 700; color: #0f172a; font-style: normal; }
.mm-srow i { display: block; height: 5px; border-radius: 3px; background: #eef0f5; margin-top: 3px; overflow: hidden; clear: both; }
.mm-srow i b { display: block; height: 100%; border-radius: 3px; }
.mm-step-checks { display: flex; flex-direction: column; gap: .32rem; }
.mm-step-checks span { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: #475569; }
.mm-step-arrow { display: flex; justify-content: center; padding: .5rem 0; }
.mm-step-arrow svg { background: #ede9fe; border-radius: 50%; padding: 6px; width: 32px; height: 32px; }
@media (max-width: 560px) { .mm-step { grid-template-columns: auto 1fr; } .mm-step-extra { display: none; } }

/* bottom CTA bar */
.mm-hiw-cta { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem; margin-top: 2.4rem; background: #faf9ff; border: 1px solid #eef0f5; border-radius: 18px; padding: 1.3rem 1.6rem; }
.mm-hiw-cta-ico { width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(135deg,#7c3aed,#5b21b6); display: flex; align-items: center; justify-content: center; flex: none; }
.mm-hiw-cta-txt { display: flex; flex-direction: column; gap: .15rem; }
.mm-hiw-cta-txt b { font-size: 1.12rem; color: #0f172a; }
.mm-hiw-cta-txt span { color: #64748b; font-size: .9rem; }
@media (max-width: 700px) { .mm-hiw-cta { grid-template-columns: 1fr; text-align: center; justify-items: center; } }

/* ── shared rings ── */
.mm-ring { position: relative; width: 46px; height: 46px; }
.mm-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mm-ring circle { fill: none; stroke-width: 3.2; }
.mm-ring-bg { stroke: #eef0f5; }
.mm-ring-fg { stroke-linecap: round; }
.mm-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; color: #0f172a; }
.mm-ring-lg { width: 82px; height: 82px; }
.mm-ring-lg b { font-size: 1.2rem; }
.mm-ring-lg b i { font-size: .58rem; font-weight: 600; color: #94a3b8; font-style: normal; }
.mm-good { color: #16a34a !important; }
.mm-warn { color: #f59e0b !important; }

/* ── AI feedback section ── */
.mm-fb { padding: 5rem 0; background: #f8f7fc; }
.mm-fb-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.2rem; align-items: start; }
@media (max-width: 900px) { .mm-fb-grid { grid-template-columns: 1fr; } }
.mm-fb-card { background: #fff; border: 1px solid #eef0f5; border-radius: 20px; padding: 1.5rem; box-shadow: 0 30px 60px -30px rgba(30,27,75,.28); }
.mm-fb-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; flex-wrap: wrap; gap: .5rem; }
.mm-fb-done { display: flex; align-items: center; gap: .6rem; }
.mm-fb-tick { width: 26px; height: 26px; border-radius: 50%; background: #10b981; color: #fff; display: flex; align-items: center; justify-content: center; font-size: .8rem; flex: none; }
.mm-fb-done b { display: block; color: #0f172a; font-size: 1rem; }
.mm-fb-done span { color: #64748b; font-size: .82rem; }
.mm-fb-date { color: #94a3b8; font-size: .8rem; }
.mm-fb-dims { display: grid; grid-template-columns: repeat(5,1fr); gap: .7rem; padding: 1rem .8rem; background: #faf9ff; border-radius: 14px; margin-bottom: 1.2rem; }
.mm-fb-dim { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; }
.mm-fb-dim > span { font-size: .68rem; color: #475569; line-height: 1.2; }
.mm-fb-dim > em { font-size: .64rem; font-style: normal; color: #64748b; }
@media (max-width: 560px) { .mm-fb-dims { grid-template-columns: repeat(3,1fr); } .mm-fb-dim-main { grid-column: span 3; } }
.mm-fb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 560px) { .mm-fb-cols { grid-template-columns: 1fr; } }
.mm-fb-qwp h4, .mm-fb-sw h4 { font-size: .85rem; margin: 0 0 .5rem; color: #0f172a; }
.mm-fb-sw h4 { margin-top: .9rem; }
.mm-fb-qrow { display: flex; justify-content: space-between; gap: .5rem; font-size: .78rem; color: #475569; padding: .34rem 0; border-bottom: 1px solid #f1f2f7; }
.mm-fb-qrow b { font-weight: 800; color: #0f172a; }
.mm-fb-sw ul { margin: .2rem 0 0; padding-left: 1.1rem; }
.mm-fb-sw li { font-size: .78rem; color: #475569; margin-bottom: .25rem; }
.mm-fb-list { background: #fff; border: 1px solid #eef0f5; border-radius: 20px; padding: 1.6rem; box-shadow: 0 24px 50px -34px rgba(30,27,75,.28); }
.mm-fb-list > h3 { margin: 0 0 1rem; font-size: 1.2rem; color: #0f172a; }
.mm-inc { display: flex; gap: .9rem; align-items: flex-start; padding: .7rem 0; border-bottom: 1px solid #f4f4f8; }
.mm-inc:last-of-type { border-bottom: none; }
.mm-inc-ico { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.mm-inc b { display: block; color: #0f172a; font-size: .95rem; margin-bottom: .15rem; }
.mm-inc p { margin: 0; color: #64748b; font-size: .84rem; line-height: 1.4; }

/* ── pricing ── */
.mm-pricing { padding: 5rem 0; background: #fff; }
.mm-price-prod { margin-bottom: 3rem; }
.mm-price-prod-head { display: flex; align-items: center; gap: .7rem; justify-content: center; margin-bottom: 1.6rem; }
.mm-price-prod-ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.mm-price-prod-head h3 { margin: 0; font-size: 1.4rem; color: #0f172a; font-weight: 800; }
.mm-price-3 { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 1.4rem; align-items: stretch; }
@media (max-width: 920px) { .mm-price-3 { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }
.mm-pcard { position: relative; background: #fff; border: 1px solid #eef0f5; border-radius: 20px; padding: 1.8rem 1.5rem; display: flex; flex-direction: column; box-shadow: 0 20px 44px -30px rgba(30,27,75,.25); }
.mm-pcard h4 { margin: .2rem 0 .6rem; font-size: 1.25rem; color: #0f172a; font-weight: 800; }
.mm-pcard-sub { color: #64748b; font-size: .86rem; line-height: 1.45; margin: 0 0 1rem; }
.mm-price-amt { display: flex; align-items: baseline; gap: .12rem; margin-bottom: .3rem; }
.mm-price-amt span { font-size: 1.4rem; font-weight: 800; color: #0f172a; }
.mm-price-amt b { font-size: 2.6rem; font-weight: 900; color: #0f172a; line-height: 1; }
.mm-price-amt i { font-style: normal; color: #94a3b8; font-size: .82rem; margin-left: .3rem; }
.mm-price-amt-light span, .mm-price-amt-light b { color: #fff; }
.mm-price-amt-light i { color: rgba(255,255,255,.7); }
.mm-price-base { font-size: 1rem; font-weight: 600; opacity: .5; text-decoration: line-through; margin-right: 6px; }
.mm-plist { list-style: none; margin: .4rem 0 1.2rem; padding: 0; flex: 1; }
.mm-plist li { position: relative; padding: .32rem 0 .32rem 1.5rem; font-size: .86rem; color: #475569; }
.mm-plist li::before { content: "\2713"; position: absolute; left: 0; color: #7c3aed; font-weight: 800; }
.mm-plist-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 480px) { .mm-plist-2 { grid-template-columns: 1fr; } }
.mm-plist-dark li { color: rgba(255,255,255,.9); }
.mm-plist-dark li::before { color: #fbbf24; }
.mm-btn-block { width: 100%; justify-content: center; }
.mm-pcard-note { text-align: center; font-size: .74rem; color: #94a3b8; margin: .7rem 0 0; }
.mm-pcard-dark { background: linear-gradient(160deg,#1e1b4b,#0f172a); border-color: transparent; color: #fff; box-shadow: 0 30px 60px -28px rgba(30,27,75,.6); }
.mm-pcard-dark h4 { color: #fff; }
.mm-pcard-sub-light { color: rgba(255,255,255,.7); }
.mm-pcard-dark .mm-pcard-note { color: rgba(255,255,255,.55); }
.mm-pcard-purple { background: linear-gradient(160deg,#7c3aed,#5b21b6); border-color: transparent; color: #fff; box-shadow: 0 30px 60px -28px rgba(124,58,237,.55); }
.mm-pcard-purple h4 { color: #fff; }
.mm-pcard-purple .mm-pcard-note { color: rgba(255,255,255,.7); }
.mm-btn-white { background: #fff; color: #5b21b6; }
.mm-btn-white:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0,0,0,.4); }
.mm-pcard-soft { background: #faf9ff; }
.mm-pcard-inc-title { text-align: center; }
.mm-inc-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.mm-inc-list li { display: flex; align-items: flex-start; gap: .5rem; font-size: .86rem; color: #475569; padding: .4rem 0; }
.mm-inc-list li span { color: #7c3aed; font-weight: 800; flex: none; }
.mm-ribbon { position: absolute; top: 1.2rem; right: 1.2rem; font-size: .62rem; font-weight: 800; letter-spacing: .06em; padding: .28rem .6rem; border-radius: 20px; }
.mm-ribbon-free { background: #ede9fe; color: #7c3aed; }
.mm-ribbon-pop { background: #f97316; color: #fff; }
.mm-ribbon-best { background: #22c55e; color: #fff; }
.mm-price-foot { text-align: center; margin-top: 1.2rem; font-size: .82rem; color: #94a3b8; }

/* ── FAQ grid (keeps lp-faq accordion JS) ── */
.mm-faq { padding: 5rem 0; background: #f8f7fc; }
.mm-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 1000px; margin: 0 auto; align-items: start; }
@media (max-width: 760px) { .mm-faq-grid { grid-template-columns: 1fr; } }
.mm-faq .lp-faq-item { background: #fff; border: 1px solid #eef0f5; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px -28px rgba(30,27,75,.25); }
.mm-faq .lp-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .8rem; text-align: left; background: none; border: none; cursor: pointer; padding: 1.1rem 1.2rem; font-size: .97rem; font-weight: 700; color: #7c3aed; line-height: 1.35; }
.mm-faq .lp-faq-arrow { transition: transform .25s; color: #94a3b8; flex: none; }
.mm-faq .lp-faq-item.open .lp-faq-arrow { transform: rotate(180deg); }
.mm-faq .lp-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; padding: 0 1.2rem; }
.mm-faq .lp-faq-item.open .lp-faq-a { max-height: 460px; padding: 0 1.2rem 1.1rem; }
.mm-faq .lp-faq-a p { margin: 0; color: #64748b; font-size: .88rem; line-height: 1.6; }

/* ── Key Advantages ── */
.mm-adv { padding: 5rem 0; background: #fff; }
.mm-adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin-top: 2.5rem; }
.mm-adv-card { background: #f8f7ff; border: 1px solid #ede9fe; border-radius: 20px; padding: 2rem 1.75rem; }
.mm-adv-ico { font-size: 2rem; margin-bottom: 1rem; }
.mm-adv-card h3 { font-size: 1.1rem; font-weight: 800; color: #0f172a; margin: 0 0 0.6rem; }
.mm-adv-card p { font-size: 0.88rem; color: #64748b; line-height: 1.65; margin: 0; }
@media (max-width: 768px) { .mm-adv-grid { grid-template-columns: 1fr; } }

/* ── Roles ── */
.mm-roles { padding: 5rem 0; background: #f8f7ff; }

/* ── Testimonials ── */
.mm-testi { padding: 5rem 0; background: #fff; }
.mm-testi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.mm-testi-card { background: #fff; border: 1px solid #eef0f5; border-radius: 20px; padding: 1.8rem; box-shadow: 0 4px 24px -8px rgba(30,27,75,.1); display: flex; flex-direction: column; }
.mm-testi-stars { color: #f59e0b; letter-spacing: 2px; margin-bottom: 0.75rem; font-size: 0.95rem; }
.mm-testi-card > p { font-size: 0.9rem; color: #334155; line-height: 1.65; font-style: italic; flex: 1; margin: 0 0 1.25rem; }
.mm-testi-author { display: flex; align-items: center; gap: 0.75rem; }
.mm-testi-avatar { font-size: 1.6rem; }
.mm-testi-author strong { display: block; font-size: 0.875rem; font-weight: 700; color: #0f172a; }
.mm-testi-author span { display: block; font-size: 0.8rem; color: #94a3b8; margin-top: 1px; }
.mm-testi-note { text-align: center; font-size: 0.78rem; color: #94a3b8; margin-top: 2.5rem; }
@media (max-width: 640px) { .mm-testi-grid { grid-template-columns: 1fr; } }

/* ── Dark Features ── */
.mm-feat-dark { background: #0F0D1F; padding: 5rem 0; }
.mm-feat-dark-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.mm-feat-dark-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 1.5rem 1.4rem; }
.mm-feat-dark-ico { font-size: 1.75rem; margin-bottom: 0.75rem; }
.mm-feat-dark-card h3 { font-size: 1rem; font-weight: 700; color: #fff; margin: 0 0 0.4rem; }
.mm-feat-dark-card p { font-size: 0.84rem; color: rgba(255,255,255,.6); line-height: 1.55; margin: 0; }
.mm-feat-dark-ctas { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 3rem; }
@media (max-width: 900px) { .mm-feat-dark-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mm-feat-dark-grid { grid-template-columns: 1fr; } }

/* ── Blog Preview ── */
.mm-blog-prev { padding: 5rem 0; background: #f8f7ff; }

/* ── Contact ── */
.mm-contact { padding: 5rem 0; background: #fff; }

/* ── Dark text helpers (for use inside .mm-feat-dark) ── */
.mm-eyebrow-light { background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.15); }
.mm-h2-light { color: #fff; }
.mm-sub-light { color: rgba(255,255,255,.65); }
.mm-btn-ghost-light { border: 2px solid rgba(255,255,255,.4); color: #fff; background: transparent; }
.mm-btn-ghost-light:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* ── Our Services (mockup style) ── */
.mm-srv { padding: 5rem 0; background: #fff; }
.mm-srv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 760px) { .mm-srv-grid { grid-template-columns: 1fr; } }
.mm-srv-card { background: #fff; border: 1px solid #eef0f5; border-radius: 18px; padding: 1.8rem; box-shadow: 0 20px 44px -30px rgba(30,27,75,.22); display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.mm-srv-card:hover { transform: translateY(-3px); box-shadow: 0 28px 56px -32px rgba(30,27,75,.35); }
.mm-srv-ico { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1rem; box-shadow: 0 10px 22px -10px rgba(99,102,241,.5); }
.mm-srv-card h3 { margin: 0 0 .5rem; font-size: 1.2rem; color: #0f172a; font-weight: 800; }
.mm-srv-card > p { margin: 0 0 1rem; color: #64748b; font-size: .9rem; line-height: 1.5; }
.mm-srv-list { list-style: none; margin: 0 0 1.3rem; padding: 0; flex: 1; }
.mm-srv-list li { position: relative; padding: .3rem 0 .3rem 1.5rem; font-size: .86rem; color: #475569; }
.mm-srv-list li::before { content: "\2713"; position: absolute; left: 0; color: #7c3aed; font-weight: 800; }
.mm-srv-actions { display: flex; align-items: center; gap: 1.2rem; }
.mm-srv-learn { color: #7c3aed; font-weight: 700; font-size: .88rem; text-decoration: none; white-space: nowrap; }
.mm-srv-learn:hover { text-decoration: underline; }

/* ── How it works: spoken-English note ── */
.mm-hiw-note { display: flex; align-items: flex-start; gap: .9rem; margin-top: 2rem; background: #f5f3ff; border: 1px solid #e9e2fd; border-radius: 16px; padding: 1.1rem 1.4rem; }
.mm-hiw-note-ico { font-size: 1.5rem; line-height: 1; flex: none; }
.mm-hiw-note p { margin: 0; color: #475569; font-size: .92rem; line-height: 1.55; }
.mm-hiw-note p b { color: #0f172a; }
.mm-hiw-note a { color: #7c3aed; font-weight: 700; text-decoration: none; white-space: nowrap; }
.mm-hiw-note a:hover { text-decoration: underline; }