/* ========================================
   Modern Theme for Examifo
   ======================================== */

/* Base Typography & Colors */
:root {
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --tracking-tight: -0.025em;
  --primary-color: #2563eb;
  --primary-hover: #1d4ed8;
  --secondary-color: #0f766e;
  --accent-color: #7c3aed;
  --dark-bg: #172554;
  --darker-bg: #0f172a;
  --light-bg: #f8fafc;
  --border-color: #e2e8f0;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --text-light: #9ca3af;
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --card-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

html {
  font-size: 15px;
  scroll-behavior: smooth;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  letter-spacing: -0.011em;
  font-optical-sizing: auto;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-primary);
  background-color: var(--light-bg);
  margin: 0;
  padding: 0;
}

/* Modern Focus Styles */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
  border-color: var(--primary-color);
  outline: none;
}

/* Typography Enhancements */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-wrap: balance;
}

.visual-equation-composer { background: #f8fafc; }
.visual-math-field {
    display: block;
    width: 100%;
    min-height: 3.5rem;
    padding: .65rem .8rem;
    border: 1px solid #cbd5e1;
    border-radius: .5rem;
    background: #fff;
    font-size: 1.35rem;
}
.visual-math-field:focus-within { border-color: #6366f1; box-shadow: 0 0 0 .2rem rgba(99,102,241,.15); }

/* CodeMirror loads as an ES module; keep the editor readable while its generated
   theme styles are loading and protect it from Bootstrap/page colour inheritance. */
.coding-ide .cm-editor,
.coding-ide .cm-scroller {
    background: #0f172a !important;
    color: #f8fafc !important;
}
.coding-ide .cm-content { background: transparent; }
.coding-ide .cm-gutters {
    background: #111c30 !important;
    color: #cbd5e1 !important;
    border-right-color: #334155 !important;
}
.coding-ide .cm-activeLine { background: #17233b !important; }
.coding-ide .cm-activeLineGutter { background: #22304a !important; color: #fff !important; }
.coding-ide .cm-token-keyword { color: #f472b6 !important; font-weight: 700; }
.coding-ide .cm-token-string { color: #fde047 !important; }
.coding-ide .cm-token-number { color: #c4b5fd !important; }
.coding-ide .cm-token-function { color: #22d3ee !important; }
.coding-ide .cm-token-type { color: #4ade80 !important; }
.coding-ide .cm-token-variable { color: #e2e8f0 !important; }
.coding-ide .cm-token-comment { color: #86efac !important; font-style: italic; }
.coding-ide .cm-token-operator { color: #fb923c !important; }
.coding-ide .tok-keyword,
.coding-ide .tok-controlKeyword,
.coding-ide .tok-operatorKeyword,
.coding-ide .tok-modifier { color: #f472b6 !important; font-weight: 700; }
.coding-ide .tok-string,
.coding-ide .tok-specialString,
.coding-ide .tok-regexp { color: #fde047 !important; }
.coding-ide .tok-number,
.coding-ide .tok-bool,
.coding-ide .tok-null { color: #c4b5fd !important; }
.coding-ide .tok-comment,
.coding-ide .tok-lineComment,
.coding-ide .tok-blockComment { color: #86efac !important; font-style: italic; }
.coding-ide .tok-function\(variableName\),
.coding-ide .tok-function\(propertyName\) { color: #22d3ee !important; }
.coding-ide .tok-typeName,
.coding-ide .tok-className { color: #4ade80 !important; }
.coding-ide .tok-operator,
.coding-ide .tok-punctuation { color: #fb923c !important; }
.coding-ide .tok-variableName,
.coding-ide .tok-propertyName { color: #e2e8f0 !important; }

h1 {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  margin-bottom: 1.5rem;
}

h2 {
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.035em;
}
h3 { font-size: 1.375rem; letter-spacing: -0.025em; }
h4 { font-size: var(--font-size-lg); }

p, li {
  text-wrap: pretty;
}

small, .small {
  font-size: var(--font-size-xs);
  line-height: var(--leading-normal);
}

/* Modern Button Styles */
.btn {
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: var(--font-size-sm);
  line-height: 1.25;
  letter-spacing: -0.01em;
  padding: 0.625rem 1.25rem;
  transition: all 0.2s ease-in-out;
  border: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
  box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-hover) 0%, #3730a3 100%);
  transform: translateY(-1px);
  box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.4);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background-color: var(--secondary-color);
  color: white;
}

.btn-secondary:hover {
  background-color: #059669;
  transform: translateY(-1px);
}

.btn-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
}

.btn-link:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

.btn-lg {
  padding: 0.875rem 1.75rem;
  font-size: 1.125rem;
}

/* Modern Form Styles */
.form-control,
.form-select {
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  padding: 0.75rem 1rem;
  transition: all 0.2s ease-in-out;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.form-floating > .form-control,
.form-floating > .form-select {
  border-radius: 0.5rem;
}

.form-floating > label {
  color: var(--text-secondary);
}

/* Card Styles */
.card {
  border: none;
  border-radius: 1rem;
  box-shadow: var(--card-shadow);
  background: white;
  transition: all 0.3s ease-in-out;
}

.card:hover {
  box-shadow: var(--card-shadow-lg);
  transform: translateY(-2px);
}

.card-header {
  background-color: white;
  border-bottom: 1px solid var(--border-color);
  border-radius: 1rem 1rem 0 0 !important;
  padding: 1.25rem 1.5rem;
}

.card-body {
  padding: 1.5rem;
}

/* Alert Styles */
.alert {
  border-radius: 0.75rem;
  border: none;
  padding: 1rem 1.25rem;
  box-shadow: var(--card-shadow);
}

.alert-info {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1e40af;
}

.alert-success {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  color: #065f46;
}

.alert-warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
}

.alert-danger {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  color: #991b1b;
}

/* Validation Styles */
.field-validation-error {
  color: #dc2626;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}

.validation-summary-errors {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.validation-summary-errors ul {
  margin: 0;
  padding-left: 1.25rem;
  color: #991b1b;
}

/* Main Content Area */
main {
  min-height: 50vh;
}

/* Footer Styles */
.footer {
  position: relative;
  background: linear-gradient(to right, var(--darker-bg) 0%, var(--dark-bg) 100%);
  color: #d1d5db;
  padding: 2rem 0;
  border-top: none;
  margin-top: 3rem;
}

.footer a {
  color: #9ca3af;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.footer a:hover {
  color: white;
}

/* Utility Classes */
.text-gradient {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.shadow-modern {
  box-shadow: var(--card-shadow);
}

.shadow-modern-lg {
  box-shadow: var(--card-shadow-lg);
}

.rounded-modern {
  border-radius: 1rem;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

/* Loading Spinner */
.spinner-border {
  border-color: var(--primary-color);
  border-right-color: transparent;
}

/* Responsive Adjustments */
@media (max-width: 767.98px) {
  h1 {
    font-size: 2rem;
  }

  .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  main {
    padding: 1rem 0;
  }
}

/* Premium product typography */
.examifo-brand,
.navbar-brand {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.examifo-navbar .nav-link {
  font-size: 0.875rem;
  font-weight: 600 !important;
  letter-spacing: -0.012em;
}

.card-title,
.modal-title,
.offcanvas-title {
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: -0.025em;
}

.card-text,
.text-muted {
  line-height: 1.6;
}

.form-label,
label:not(.form-check-label) {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.form-control,
.form-select,
.input-group-text {
  font-family: var(--font-sans);
}

.table {
  font-size: 0.875rem;
  letter-spacing: -0.006em;
}

.table thead th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.badge {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
}

/* Authenticated workspace */
.workspace-dashboard { padding: 3rem 0 5rem; color: #17233c; }
.workspace-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.workspace-eyebrow { display: block; color: #0f766e; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .45rem; }
.workspace-heading h1 { margin: 0; font-size: clamp(1.9rem, 3vw, 2.65rem); font-weight: 700; letter-spacing: -.035em; }
.workspace-heading p, .workspace-panel-heading p { margin: .4rem 0 0; color: #6b7485; }
.workspace-create { border-radius: .55rem; padding: .72rem 1.05rem; font-weight: 700; }
.workspace-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #dfe4ec; border-radius: .8rem; background: #fff; margin-bottom: 1.5rem; overflow: hidden; }
.workspace-stat { display: flex; flex-direction: column; padding: 1.25rem 1.4rem; border-right: 1px solid #e7eaf0; color: inherit; text-decoration: none; transition: background .18s ease; }
a.workspace-stat:hover { background: #f8fafc; color: inherit; }
.workspace-stat:last-child { border-right: 0; }
.workspace-stat > span { color: #667085; font-size: var(--font-size-sm); font-weight: 600; }
.workspace-stat strong { font-size: 2rem; line-height: 1.2; margin: .3rem 0 .55rem; letter-spacing: -.04em; }
.workspace-stat small { color: #8991a0; font-size: var(--font-size-xs); }
.workspace-stat small i { margin-right: .3rem; color: #0f766e; }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, .85fr); gap: 1.5rem; margin-bottom: 1.5rem; }
.workspace-panel { border: 1px solid #dfe4ec; border-radius: .8rem; background: #fff; overflow: hidden; }
.workspace-panel-heading { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.35rem; border-bottom: 1px solid #e7eaf0; }
.workspace-panel-heading h2 { margin: 0; font-size: var(--font-size-base); font-weight: 700; }
.workspace-panel-heading p { font-size: var(--font-size-sm); }
.workspace-panel-heading > a { color: #0f766e; font-size: var(--font-size-sm); font-weight: 600; text-decoration: none; }
.workspace-list-row { display: flex; align-items: center; gap: .9rem; min-height: 70px; padding: .8rem 1.35rem; border-bottom: 1px solid #edf0f4; color: inherit; text-decoration: none; }
.workspace-list-row:last-child { border-bottom: 0; }
.workspace-list-row:hover { color: inherit; background: #f8fafc; }
.workspace-item-icon { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: .55rem; color: #335eea; background: #edf2ff; }
.workspace-item-icon.is-form { color: #0f766e; background: #e8f7f4; }
.workspace-item-main { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.workspace-item-main strong, .workspace-item-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-item-main strong { font-size: var(--font-size-sm); }
.workspace-item-main small { color: #7b8493; font-size: var(--font-size-xs); margin-top: .2rem; }
.workspace-response-count { min-width: 72px; font-size: .86rem; font-weight: 700; text-align: right; }
.workspace-response-count small { display: block; color: #8a93a2; font-size: var(--font-size-xs); font-weight: 500; }
.workspace-status { min-width: 52px; border-radius: 999px; padding: .28rem .55rem; background: #f0f2f5; color: #687181; font-size: var(--font-size-xs); font-weight: 700; text-align: center; }
.workspace-status.is-live { color: #08785e; background: #e5f7f1; }
.workspace-chevron { color: #a5acb7; font-size: .75rem; }
.workspace-actions > a { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; border-bottom: 1px solid #edf0f4; color: inherit; text-decoration: none; }
.workspace-actions > a:last-child { border-bottom: 0; }
.workspace-actions > a:hover { background: #f8fafc; color: inherit; }
.workspace-actions > a > span { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #dfe4ec; border-radius: .5rem; color: #0f766e; }
.workspace-actions > a > div { display: flex; flex: 1; flex-direction: column; }
.workspace-actions strong { font-size: .84rem; }
.workspace-actions small { margin-top: .15rem; color: #7b8493; font-size: .72rem; }
.workspace-actions > a > i { color: #9ba3b0; font-size: .75rem; }
.workspace-empty { padding: 2.8rem 1.5rem; text-align: center; }
.workspace-empty > span { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto .85rem; border-radius: 50%; background: #edf2ff; color: #335eea; font-size: 1.15rem; }
.workspace-empty h3 { margin: 0 0 .35rem; font-size: 1rem; }
.workspace-empty p { max-width: 390px; margin: 0 auto 1rem; color: #727b8a; font-size: .84rem; }
.workspace-empty-compact { display: flex; align-items: center; gap: .9rem; text-align: left; padding: 1.4rem; }
.workspace-empty-compact > span { flex: 0 0 42px; width: 42px; height: 42px; margin: 0; }
.workspace-empty-compact p { margin: .2rem 0 0; }
.workspace-avatar { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 50%; background: #17233c; color: #fff; font-size: var(--font-size-xs); font-weight: 700; }
.workspace-score { color: #08785e; font-size: var(--font-size-sm); font-weight: 700; }
.workspace-list-row time { min-width: 105px; color: #7b8493; font-size: .74rem; text-align: right; }

/* Billing and entitlements */
.billing-shell { padding: 2.5rem 0 4rem; }
.billing-settings-shell { max-width: 980px; margin: 0 auto; }
.billing-account-card { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.5rem; border:1px solid #dedede; border-radius:16px; background:#fff; margin-bottom:2rem; }
.billing-account-main { display:flex; align-items:flex-start; gap:1rem; }
.billing-plan-icon { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:12px; background:#111; color:#fff; }
.billing-plan-line { display:flex; align-items:center; gap:.65rem; }
.billing-plan-line h2 { margin:0; font-size:1.15rem; font-weight:700; }
.billing-account-main p { margin:.3rem 0 .15rem; color:#404040; }
.billing-account-main small { color:#737373; }
.billing-status-pill { padding:.2rem .55rem; border-radius:999px; background:#eef8f3; color:#14764f; font-size:.68rem; font-weight:700; text-transform:capitalize; }
.billing-card-actions { display:flex; flex-direction:column; min-width:135px; }
.billing-section { margin-top:2rem; padding:1.5rem; border:1px solid #e5e5e5; border-radius:16px; background:#fff; }
.billing-section-heading h2 { margin:0 0 .25rem; font-size:1.1rem; font-weight:700; }
.billing-section-heading p { color:#737373; font-size:.88rem; }
.billing-offer-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.billing-offer-card { padding:1.25rem; border:1px solid #dedede; border-radius:14px; display:flex; flex-direction:column; align-items:flex-start; }
.billing-offer-featured { border-color:#222; box-shadow:0 0 0 1px #222; }
.billing-offer-kicker { color:#707070; font-size:.66rem; letter-spacing:.08em; font-weight:800; }
.billing-offer-card h3 { margin:.55rem 0 .4rem; font-size:1.15rem; font-weight:750; }
.billing-offer-card p { color:#606060; font-size:.88rem; }
.billing-offer-card ul { margin:0 0 1.2rem; padding-left:1.15rem; font-size:.84rem; line-height:1.8; }
.billing-offer-card .btn { margin-top:auto; }
.billing-code-form { display:flex; gap:.5rem; width:100%; margin-top:auto; }
.billing-code-form .form-control { min-width:0; }
.faculty-verify-shell{max-width:760px;margin:0 auto;padding:3rem 0 5rem}.faculty-verify-shell header{margin-bottom:1.5rem}.faculty-verify-shell h1{margin:.35rem 0 .5rem;font-weight:800}.faculty-verify-shell header p{color:#686868}.faculty-verify-card{display:grid;gap:1.2rem;padding:1.5rem;border:1px solid #dedede;border-radius:16px;background:#fff}.faculty-verify-card label{display:block;margin-bottom:.4rem;font-size:.82rem;font-weight:700}.faculty-privacy{display:flex;gap:.7rem;padding:1rem;border-radius:10px;background:#f7f7f7;color:#555;font-size:.82rem}.faculty-status{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;margin-bottom:1rem;padding:1rem;border-radius:12px;background:#eef8f3}.faculty-status span{color:#666;font-size:.75rem}.faculty-status b{text-transform:capitalize;color:#14764f}
.billing-offer-note { display:flex; gap:.65rem; margin-top:1rem; padding:.8rem 1rem; border-radius:10px; background:#f7f7f7; color:#555; font-size:.82rem; }
@media (max-width: 767px) { .billing-account-card { align-items:flex-start; flex-direction:column; } .billing-card-actions { width:100%; } .billing-offer-grid { grid-template-columns:1fr; } }
.billing-heading { max-width: 760px; margin-bottom: 2rem; }
.billing-heading h1 { margin: .35rem 0 .5rem; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; }
.billing-heading p { color: #6b7482; }
.billing-heading-row { display: flex; align-items: center; justify-content: space-between; max-width: none; gap: 1rem; }
.plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 1.25rem; padding: 1.5rem; border: 1px solid #e1e5eb; border-radius: .9rem; background: #fff; box-shadow: 0 8px 30px rgba(23,35,60,.05); }
.plan-card.is-featured { border: 2px solid #335eea; }
.plan-card h2 { font-size: 1.2rem; font-weight: 800; }
.plan-price { display: flex; align-items: baseline; gap: .35rem; min-height: 40px; }
.plan-price strong { font-size: 1.5rem; }
.plan-price span,.plan-card p { color: #707988; font-size: .82rem; }
.plan-card ul { flex: 1; padding: 0; margin: 0; list-style: none; }
.plan-card li { display: flex; gap: .45rem; padding: .35rem 0; color: #4d5664; font-size: .76rem; }
.plan-card li i { color: #0f8a69; }
.plan-ribbon { position: absolute; right: 1rem; top: 1rem; padding: .25rem .5rem; border-radius: 1rem; background: #edf2ff; color: #335eea; font-size: var(--font-size-xs); font-weight: 700; }
.plan-grading-features { display: grid; gap: .55rem; }
.plan-grading-features > div { display: flex; gap: .6rem; padding: .7rem; border: 1px dashed #d8dde5; border-radius: .55rem; color: #9aa2ae; background: #fafbfc; }
.plan-grading-features > div.is-included { border-style: solid; border-color: #b9e7d8; color: #08785e; background: #f0fbf7; }
.plan-grading-features i { margin-top: .1rem; }
.plan-grading-features span { display: flex; flex-direction: column; }
.plan-grading-features strong { color: inherit; font-size: var(--font-size-xs); }
.plan-grading-features small { color: inherit; font-size: var(--font-size-xs); opacity: .85; }
.billing-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.25rem; padding: 1.4rem; border: 1px solid #e1e5eb; border-radius: .8rem; background: #fff; }
.billing-summary > div { display: flex; flex-direction: column; gap: .3rem; }
.billing-summary span { color: #798290; font-size: .72rem; }
.billing-summary strong { font-size: .95rem; }
.billing-summary-actions { align-items: flex-end; justify-content: center; }
.usage-row { display: grid; grid-template-columns: 220px 1fr 130px; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-top: 1px solid #edf0f4; }
.usage-label,.usage-value { display: flex; flex-direction: column; }
.usage-label small,.usage-value small { color: #7b8493; font-size: .7rem; }
.usage-value { text-align: right; }
.progress { height: 6px; background: #edf0f4; }
.dashboard-plan { margin-bottom: 1.25rem; }
.dashboard-usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; padding: 1.2rem; }
.dashboard-usage-grid > div { display: grid; gap: .4rem; }
.dashboard-usage-grid span { color: #747e8c; font-size: .72rem; }
.dashboard-usage-grid strong { font-size: .9rem; }
.usage-reset { color: #7b8493; font-size: .68rem; }
.usage-reset a,.usage-value a { color: #335eea; font-size: .7rem; font-weight: 700; text-decoration: none; }
.structured-rubric { padding: 1.15rem; border: 1px solid #cdd8fb; border-radius: .75rem; background: #f7f9ff; }
.rubric-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }
.rubric-heading > div { display: flex; flex-direction: column; }
.rubric-heading strong { color: #17233c; font-size: .9rem; }
.rubric-heading small { margin-top: .15rem; color: #778196; font-size: .7rem; }

/* Signed-in application shell */
.app-shell { min-height: 100vh; background: #f7f8fa; }
.app-sidebar { position: fixed; z-index: 1040; inset: 0 auto 0 0; display: flex; width: 264px; flex-direction: column; padding: 1rem .75rem .75rem; border-right: 1px solid #e5e7eb; background: #fff; }
.app-content { min-width: 0; margin-left: 264px; }
.app-content > main > .container { max-width: 1320px; }
.app-sidebar-brand { display: flex; align-items: center; justify-content: space-between; padding: .2rem .55rem 1rem; }
.app-sidebar-brand .examifo-brand,.app-mobile-header .examifo-brand { display: flex; align-items: center; gap: .55rem; color: #17233c; font-weight: 800; text-decoration: none; }
.examifo-sidebar-logo { display:block; width:150px; height:46px; object-fit:contain; object-position:left center; }
.app-sidebar-close { display: none; border: 0; background: transparent; color: #64748b; }
.app-new-button { display: flex; align-items: center; gap: .7rem; margin: .2rem .35rem 1rem; padding: .75rem .9rem; border: 1px solid #d9dee8; border-radius: .65rem; color: #17233c; background: #fff; box-shadow: 0 2px 8px rgba(23,35,60,.04); font-size: .8rem; font-weight: 700; text-decoration: none; }
.app-new-button:hover { border-color: #b9c4d5; color: #17233c; background: #f8fafc; }
.app-sidebar-nav { display: flex; flex: 1; flex-direction: column; gap: .2rem; overflow-y: auto; }
.app-nav-label { margin: .9rem .75rem .3rem; color: #98a1ae; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.app-sidebar-nav a { display: flex; align-items: center; gap: .75rem; padding: .68rem .75rem; border-radius: .55rem; color: #566070; font-size: .78rem; font-weight: 600; text-decoration: none; }
.app-sidebar-nav a i { width: 19px; color: #788291; font-size: 1rem; text-align: center; }
.app-sidebar-nav a:hover,.app-sidebar-nav a.is-active { color: #17233c; background: #f0f2f5; }
.app-sidebar-nav a.is-active { font-weight: 750; }
.app-sidebar-account { display: grid; gap: .55rem; padding-top: .75rem; border-top: 1px solid #edf0f4; }
.app-plan-card { display: flex; align-items: center; justify-content: space-between; padding: .7rem .75rem; border-radius: .6rem; color: #fff; background: #17233c; text-decoration: none; }
.app-plan-card:hover { color: #fff; background: #21304e; }
.app-plan-card span,.app-user-copy { display: flex; min-width: 0; flex-direction: column; }
.app-plan-card strong { font-size: .75rem; }
.app-plan-card small { margin-top: .15rem; color: #b9c5d9; font-size: .63rem; }
.app-user-button { display: flex; width: 100%; align-items: center; gap: .65rem; padding: .55rem .45rem; border: 0; border-radius: .55rem; background: transparent; text-align: left; }
.app-user-button:hover { background: #f4f6f8; }
.app-user-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 50%; color: #fff; background: #335eea; font-size: .72rem; font-weight: 800; }
.app-user-copy { flex: 1; }
.app-user-copy strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.app-user-copy small { overflow: hidden; color: #858e9c; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.app-mobile-header { display: none; }
.app-sidebar-backdrop { display: none; }

@media (max-width: 991.98px) {
  .app-content { margin-left: 0; }
  .app-mobile-header { display: flex; height: 62px; align-items: center; gap: .75rem; padding: 0 1rem; border-bottom: 1px solid #e5e7eb; background: #fff; }
  .app-mobile-header > button { border: 0; background: transparent; font-size: 1.35rem; }
  .app-sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  .app-sidebar-close { display: inline-grid; place-items: center; }
  .sidebar-open .app-sidebar { transform: translateX(0); }
  .sidebar-open .app-sidebar-backdrop { display: block; position: fixed; z-index: 1030; inset: 0; background: rgba(15,23,42,.4); }
}

@media (max-width: 992px) {
  .plan-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .plan-grid,.billing-summary,.dashboard-usage-grid { grid-template-columns: 1fr; }
  .billing-heading-row { align-items: flex-start; flex-direction: column; }
  .usage-row { grid-template-columns: 1fr; }
  .usage-value { text-align: left; }
}

@media (max-width: 991.98px) {
  .workspace-stats { grid-template-columns: repeat(2, 1fr); }
  .workspace-stat:nth-child(2) { border-right: 0; }
  .workspace-stat:nth-child(-n+2) { border-bottom: 1px solid #e7eaf0; }
  .workspace-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
  .workspace-dashboard { padding-top: 2rem; }
  .workspace-heading { align-items: flex-start; flex-direction: column; }
  .workspace-create { width: 100%; }
  .workspace-heading .dropdown { width: 100%; }
  .workspace-stat { padding: 1rem; }
  .workspace-response-count { display: none; }
  .workspace-list-row time { display: none; }
}

/* Examifo account access */
.auth-page {
  padding: clamp(2rem, 5vw, 4.5rem) 0;
}

.auth-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(400px, 1.1fr);
  min-height: 680px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: #fff;
  box-shadow: 0 28px 60px -42px rgba(15, 23, 42, 0.45);
}

.auth-context {
  display: flex;
  position: relative;
  justify-content: space-between;
  flex-direction: column;
  padding: clamp(2.25rem, 5vw, 4.5rem);
  overflow: hidden;
  color: #fff;
  background: #172554;
}

.auth-context::after {
  position: absolute;
  right: -8rem;
  bottom: -8rem;
  width: 24rem;
  height: 24rem;
  border: 1px solid rgba(147, 197, 253, 0.22);
  border-radius: 50%;
  box-shadow:
    0 0 0 4rem rgba(147, 197, 253, 0.04),
    0 0 0 8rem rgba(147, 197, 253, 0.03);
  content: "";
}
.auth-brand { position:absolute; z-index:2; top:1.5rem; right:1.5rem; display:grid; width:54px; height:54px; place-items:center; overflow:hidden; border-radius:14px; background:#fff; box-shadow:0 10px 25px rgba(0,0,0,.16); }
.auth-brand img { display:block; width:100%; height:100%; object-fit:contain; }

.auth-overline,
.auth-form-heading > span {
  display: block;
  margin-bottom: 1.25rem;
  color: #93c5fd;
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
}

.auth-context h1 {
  max-width: 520px;
  margin-bottom: 1.25rem;
  color: #fff;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.auth-context > div > p {
  max-width: 440px;
  color: #bfdbfe;
  line-height: 1.75;
}

.auth-capabilities {
  position: relative;
  z-index: 1;
  margin: 3rem 0;
  border-top: 1px solid rgba(191, 219, 254, 0.25);
}

.auth-capabilities > div {
  display: grid;
  grid-template-columns: 2rem 1fr;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(191, 219, 254, 0.25);
}

.auth-capabilities span {
  grid-row: 1 / span 2;
  color: #60a5fa;
  font-size: var(--font-size-xs);
  font-weight: 800;
}

.auth-capabilities strong,
.auth-capabilities small {
  display: block;
}

.auth-capabilities strong {
  color: #fff;
  font-size: 0.85rem;
}

.auth-capabilities small {
  margin-top: 0.2rem;
  color: #93a9c8;
  font-size: var(--font-size-xs);
}

.auth-home-link {
  display: inline-flex;
  position: relative;
  z-index: 1;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  color: #bfdbfe;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
}

.auth-home-link:hover {
  color: #fff;
}

.auth-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 5rem);
}

.auth-form-wrap {
  width: 100%;
  max-width: 470px;
}

.auth-form-heading {
  margin-bottom: 2rem;
}

.auth-form-heading > span {
  margin-bottom: 0.75rem;
  color: var(--primary-color);
}

.auth-form-heading h2 {
  margin-bottom: 0.75rem;
  font-size: clamp(2rem, 3vw, 2.75rem);
  letter-spacing: -0.045em;
}

.auth-form-heading p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.auth-form {
  display: grid;
  gap: 1.2rem;
}

.auth-form .validation-summary-valid {
  display: none;
}

.auth-field label,
.auth-label-row label {
  display: block;
  margin-bottom: 0.45rem;
  color: #334155;
  font-size: 0.76rem;
  font-weight: 700;
}

.auth-field > input {
  width: 100%;
  min-height: 50px;
  padding: 0.75rem 0.9rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.35rem;
  color: var(--text-primary);
  background: #fff;
  font: inherit;
  font-size: 0.9rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-field > input:focus {
  border-color: var(--primary-color);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.auth-field > input::placeholder {
  color: #94a3b8;
}

.auth-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-label-row a {
  margin-bottom: 0.45rem;
  color: var(--primary-color);
  font-size: 0.7rem;
  font-weight: 600;
  text-decoration: none;
}

.auth-remember {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: #64748b;
  font-size: 0.75rem;
  cursor: pointer;
}

.auth-remember input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary-color);
}

.auth-captcha:empty {
  display: none;
}

.auth-submit {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 0;
  border-radius: 0.35rem;
  color: #fff;
  background: var(--primary-color);
  font-size: 0.9rem;
  font-weight: 700;
  transition: background-color 0.15s ease;
}

.auth-submit:hover {
  background: var(--primary-hover);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #94a3b8;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  height: 1px;
  flex: 1;
  background: #e2e8f0;
  content: "";
}

.auth-google {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.35rem;
  color: #334155;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.auth-google:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.auth-register {
  margin: 0.2rem 0 0;
  color: #64748b;
  font-size: 0.78rem;
  text-align: center;
}

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

.auth-layout-register {
  min-height: 740px;
}

.auth-layout-recovery {
  min-height: 620px;
}

.auth-recovery-steps {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.auth-legal {
  max-width: 380px;
  margin: 0 auto;
  color: #94a3b8;
  font-size: var(--font-size-xs);
  line-height: 1.55;
  text-align: center;
}

.auth-legal a {
  color: #64748b;
  text-underline-offset: 0.15rem;
}

.auth-legal a:hover {
  color: var(--primary-color);
}

@media (max-width: 991.98px) {
  .auth-layout {
    grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr);
  }

  .auth-context {
    padding: 2.25rem;
  }

  .auth-form-panel {
    padding: 2.5rem;
  }
}

@media (max-width: 767.98px) {
  .auth-page {
    padding: 1.25rem 0 3rem;
  }

  .auth-layout {
    display: block;
    min-height: 0;
    border: 0;
    box-shadow: none;
  }

  .auth-layout-register {
    min-height: 0;
  }

  .auth-layout-recovery {
    min-height: 0;
  }

  .auth-context {
    min-height: auto;
    padding: 2rem;
  }
  .auth-brand { top:1rem; right:1rem; width:46px; height:46px; border-radius:12px; }

  .auth-context h1 {
    font-size: 2.6rem;
  }

  .auth-context > div > p,
  .auth-capabilities {
    display: none;
  }

  .auth-home-link {
    margin-top: 1.75rem;
  }

  .auth-form-panel {
    padding: 2.25rem 1.25rem;
  }
}

/* ========================================
   Examifo public experience
   ======================================== */
.examifo-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  padding: 0.9rem 0;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.examifo-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--text-primary);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.examifo-brand:hover {
  color: var(--text-primary);
}
.examifo-navbar-logo { display:block; width:auto; height:44px; object-fit:contain; }
.examifo-brand-icon { width:32px; height:32px; object-fit:contain; }
.home-brand-logo { position:absolute; z-index:1; top:1rem; right:0; display:block; width:190px; height:auto; margin:0; pointer-events:none; }
@media (max-width: 991px) { .home-brand-logo { display:none; } }
@media (max-width: 575px) { .examifo-navbar-logo { height:36px; } }

.brand-mark {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.65rem;
  color: #fff;
  background: var(--primary-color);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
}

.brand-mark i {
  font-size: 1.45rem;
  line-height: 1;
}

.brand-mark-small {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 0.5rem;
}

.brand-mark-small i {
  font-size: 1.1rem;
}

.examifo-navbar .nav-link {
  position: relative;
  color: #475569;
  font-size: 0.92rem;
}

.examifo-navbar .nav-link:hover,
.examifo-navbar .nav-link:focus {
  color: var(--primary-color);
}

.examifo-navbar .navbar-toggler {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border-color) !important;
  box-shadow: none;
}

.home-hero {
  position: relative;
  padding: clamp(3.5rem, 6vw, 5.75rem) 0 clamp(4rem, 7vw, 6.5rem);
  border-bottom: 1px solid var(--border-color);
}

.home-hero::before {
  position: absolute;
  z-index: -1;
  top: 2rem;
  left: -15vw;
  width: 45vw;
  height: 45vw;
  max-width: 600px;
  max-height: 600px;
  border-radius: 50%;
  background: rgba(219, 234, 254, 0.38);
  filter: blur(90px);
  content: "";
}

.assessment-canvas {
  position: relative;
  padding: clamp(1.6rem, 3.5vw, 2.75rem);
  border-top: 3px solid var(--text-primary);
  border-bottom: 1px solid #94a3b8;
  background:
    linear-gradient(rgba(226, 232, 240, 0.48) 1px, transparent 1px),
    #fff;
  background-size: 100% 2.5rem;
  box-shadow: 22px 24px 0 #dbeafe;
}

.canvas-ruler {
  display: flex;
  position: absolute;
  top: -1.7rem;
  right: 0;
  gap: 1.45rem;
  color: #94a3b8;
  font-size: 0.59rem;
  font-weight: 700;
}

.canvas-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.35rem;
}

.canvas-kicker,
.canvas-points {
  color: #64748b;
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.canvas-points {
  padding-bottom: 0.15rem;
  border-bottom: 1px solid #94a3b8;
}

.assessment-canvas h2 {
  max-width: 530px;
  margin-bottom: 1.8rem;
  font-size: clamp(1.45rem, 2.8vw, 2.25rem);
  line-height: 1.25;
  letter-spacing: -0.04em;
}

.answer-sheet {
  display: grid;
  gap: 0.6rem;
}

.answer-sheet > div {
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  align-items: center;
  min-height: 3.15rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid #cbd5e1;
  background: rgba(255, 255, 255, 0.9);
}

.answer-sheet > div > span {
  color: #64748b;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-style: italic;
}

.answer-sheet p {
  margin: 0;
  color: #334155;
  font-size: 0.88rem;
  font-weight: 600;
}

.answer-sheet .selected {
  border: 2px solid var(--primary-color);
  background: #eff6ff;
}

.answer-sheet .selected span,
.answer-sheet .selected p,
.answer-sheet .selected i {
  color: #1d4ed8;
}

.answer-sheet .selected i {
  font-size: 1.2rem;
}

.canvas-note {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.35rem;
  color: #64748b;
}

.canvas-note > i {
  color: var(--secondary-color);
  font-size: 1.35rem;
}

.canvas-note span,
.canvas-note strong {
  display: block;
  font-size: 0.7rem;
}

.canvas-note strong {
  margin-bottom: 0.1rem;
  color: #334155;
  font-size: 0.75rem;
}

.canvas-caption {
  position: absolute;
  right: -3.7rem;
  bottom: 7rem;
  color: #64748b;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  transform: rotate(90deg);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.3rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  color: #1d4ed8;
  background: #eff6ff;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-index {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(2.5rem, 4vw, 3.75rem);
  padding-top: 0.8rem;
  border-top: 2px solid var(--text-primary);
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home-hero-title {
  max-width: 1050px;
  margin: 0;
  font-size: clamp(3.25rem, 7vw, 6.35rem);
  line-height: 0.96;
  letter-spacing: -0.065em;
}

.home-hero-title span {
  margin-left: 0;
  color: var(--primary-color);
  font-family: inherit;
  font-weight: 700;
  letter-spacing: inherit;
}

.hero-lower {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto;
  align-items: end;
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(2.5rem, 4vw, 3.75rem);
}

.home-hero-copy {
  max-width: 580px;
  margin: 0;
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.75;
}

.home-hero-actions {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 0.65rem;
}

.home-hero-actions a {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  border-radius: 0.45rem;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.home-hero-actions .hero-primary {
  color: #fff;
  background: var(--primary-color);
}

.home-hero-actions .hero-primary:hover {
  color: #fff;
  background: var(--primary-hover);
}

.home-hero-actions .hero-secondary {
  border: 1px solid var(--border-color);
  color: #334155;
  background: #fff;
}

.home-hero-actions .hero-secondary:hover {
  border-color: #94a3b8;
  color: var(--text-primary);
}

.btn-soft {
  border: 1px solid var(--border-color);
  color: #334155;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.btn-soft:hover {
  border-color: #bfdbfe;
  color: var(--primary-color);
  background: #fff;
  transform: translateY(-1px);
}

.home-trust-row {
  display: flex;
  grid-column: 1 / -1;
  gap: 1.5rem;
  margin-top: 0.5rem;
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-trust-row span {
  position: relative;
  padding-left: 0.85rem;
}

.home-trust-row span::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: var(--primary-color);
  content: "";
  transform: translateY(-50%);
}

.product-preview {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2rem);
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, 0.85);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 32px 70px -32px rgba(30, 64, 175, 0.38);
}

.product-preview::after {
  position: absolute;
  top: -55px;
  right: -55px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(219, 234, 254, 0.75);
  content: "";
}

.preview-topbar,
.preview-footer {
  display: flex;
  position: relative;
  z-index: 1;
  align-items: center;
  justify-content: space-between;
}

.preview-topbar h2 {
  margin: 0.35rem 0 0;
  font-size: 1.3rem;
}

.preview-label {
  display: block;
  color: #94a3b8;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.status-pill,
.trend-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  color: #047857;
  background: #ecfdf5;
  font-size: 0.72rem;
  font-weight: 700;
}

.status-pill > span {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #10b981;
}

.preview-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 1.75rem 0;
  padding: 1rem 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.preview-metrics div {
  padding: 0 1rem;
  border-right: 1px solid var(--border-color);
}

.preview-metrics div:first-child {
  padding-left: 0;
}

.preview-metrics div:last-child {
  border-right: 0;
}

.preview-metrics span,
.preview-footer > span {
  display: block;
  color: #94a3b8;
  font-size: 0.7rem;
}

.preview-metrics strong {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.45rem;
}

.preview-chart {
  padding: 1.15rem;
  border-radius: 1rem;
  background: #f8fafc;
}

.preview-chart strong {
  display: block;
  margin-top: 0.15rem;
  font-size: 1.8rem;
}

.chart-bars {
  display: flex;
  height: 105px;
  align-items: flex-end;
  gap: 0.65rem;
  margin-top: 1.2rem;
}

.chart-bars span {
  flex: 1;
  min-width: 8px;
  border-radius: 0.35rem 0.35rem 0.15rem 0.15rem;
  background: #bfdbfe;
}

.chart-bars span.active {
  background: var(--primary-color);
}

.preview-footer {
  margin-top: 1.2rem;
}

.participant-avatars {
  display: flex;
}

.participant-avatars span {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  margin-left: -0.35rem;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #1e3a8a;
  background: #dbeafe;
  font-size: 0.58rem;
  font-weight: 800;
}

.participant-avatars span:first-child {
  margin-left: 0;
}

.home-section {
  padding: 6rem 0;
  border-top: 1px solid var(--border-color);
}

.section-heading {
  max-width: 680px;
  margin: 0 auto 3.25rem;
  text-align: center;
}

.eyebrow-light {
  padding: 0;
  border: 0;
  background: transparent;
}

.section-heading h2,
.workflow-section h2,
.home-cta h2 {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -0.045em;
}

.section-heading p,
.workflow-section > .row > div > p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.7;
}

.feature-card {
  position: relative;
  padding: 1.75rem;
  border: 1px solid var(--border-color);
  border-radius: 1.15rem;
  background: #fff;
}

.feature-card:hover {
  border-color: #cbd5e1;
}

.feature-icon {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.75rem;
  border-radius: 0.85rem;
  font-size: 1.35rem;
}

.feature-icon-blue { color: #1d4ed8; background: #dbeafe; }
.feature-icon-teal { color: #0f766e; background: #ccfbf1; }
.feature-icon-violet { color: #6d28d9; background: #ede9fe; }

.feature-number {
  position: absolute;
  top: 1.8rem;
  right: 1.75rem;
  color: #cbd5e1;
  font-size: 0.75rem;
  font-weight: 800;
}

.feature-card h3 {
  margin-bottom: 0.75rem;
  font-size: 1.22rem;
}

.feature-card p {
  min-height: 4.75rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.feature-detail {
  display: block;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
  color: #334155;
  font-size: 0.78rem;
  font-weight: 700;
}

.question-types {
  padding: 1rem 0 7rem;
}

.question-types-heading {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(360px, 1.25fr);
  align-items: end;
  column-gap: 3rem;
  margin-bottom: 2.5rem;
}

.question-types-heading .eyebrow {
  grid-column: 1;
}

.question-types-heading h2 {
  grid-column: 1;
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.35rem);
  letter-spacing: -0.05em;
}

.question-types-heading p {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 440px;
  margin: 0 0 0.35rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.question-type-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

.question-type-list > div {
  display: grid;
  position: relative;
  grid-template-columns: 2.75rem 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  min-height: 115px;
  padding: 1.25rem;
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.75);
}

.question-type-list > div:nth-child(3n) {
  border-right: 0;
}

.question-type-list > div:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.question-type-list > div > span {
  position: absolute;
  top: 0.65rem;
  right: 0.75rem;
  color: #cbd5e1;
  font-size: 0.55rem;
  font-weight: 800;
}

.question-type-list i {
  grid-row: 1 / span 2;
  color: var(--primary-color);
  font-size: 1.35rem;
}

.question-type-list strong,
.question-type-list small {
  display: block;
}

.question-type-list strong {
  font-size: 0.9rem;
}

.question-type-list small {
  margin-top: 0.2rem;
  color: var(--text-secondary);
  font-size: 0.68rem;
}

.product-tour {
  padding: 2rem 0 7rem;
}

.tour-intro {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: end;
  gap: 3rem;
  margin-bottom: 2.5rem;
}

.tour-intro h2 {
  max-width: 650px;
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -0.05em;
}

.tour-intro > p {
  max-width: 450px;
  margin: 0 0 0.35rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.tour-carousel {
  border-top: 2px solid var(--text-primary);
}

.tour-tabs {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border-bottom: 1px solid var(--border-color);
}

.tour-tabs button {
  position: relative;
  padding: 1rem 0.75rem;
  border: 0;
  border-right: 1px solid var(--border-color);
  color: #64748b;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: left;
}

.tour-tabs button:last-child {
  border-right: 0;
}

.tour-tabs button span {
  margin-right: 0.55rem;
  color: #94a3b8;
  font-size: 0.62rem;
}

.tour-tabs button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: transparent;
  content: "";
}

.tour-tabs button.active {
  color: var(--text-primary);
}

.tour-tabs button.active::after {
  background: var(--primary-color);
}

.tour-slide {
  display: grid;
  grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.45fr);
  min-height: 475px;
  background: #fff;
}

.tour-copy {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: clamp(2rem, 5vw, 4.5rem);
  border-right: 1px solid var(--border-color);
}

.tour-copy > span {
  margin-bottom: 1.1rem;
  color: var(--primary-color);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.tour-copy h3 {
  margin-bottom: 1.25rem;
  font-family: var(--font-sans);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.tour-copy p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.7;
}

.tour-screen {
  align-self: center;
  width: calc(100% - clamp(2rem, 6vw, 5rem));
  min-height: 330px;
  margin: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  box-shadow: 14px 16px 0 #e2e8f0;
  color: #334155;
}

.screen-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--border-color);
  background: #fff;
  font-size: 0.75rem;
}

.screen-bar > span {
  color: #64748b;
  font-size: 0.64rem;
}

.screen-body {
  display: grid;
  grid-template-columns: 50px 1fr;
  min-height: 280px;
}

.screen-body aside {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.8rem;
  padding-top: 1.1rem;
  border-right: 1px solid var(--border-color);
  background: #fff;
}

.screen-body aside span,
.screen-body aside i {
  display: inline-flex;
  width: 1.7rem;
  height: 1.7rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  color: #94a3b8;
  font-size: 0.55rem;
  font-style: normal;
}

.screen-body aside span.active {
  border-color: var(--primary-color);
  color: #fff;
  background: var(--primary-color);
}

.builder-question {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.7rem;
}

.builder-question small,
.share-screen > small {
  color: #94a3b8;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.builder-question > strong {
  margin-bottom: 0.35rem;
  font-size: 1rem;
}

.builder-question > span {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem;
  border: 1px solid var(--border-color);
  background: #fff;
  font-size: 0.7rem;
}

.builder-question > span i {
  width: 0.7rem;
  height: 0.7rem;
  border: 1px solid #94a3b8;
  border-radius: 50%;
}

.builder-question button {
  align-self: flex-start;
  padding: 0;
  border: 0;
  color: var(--primary-color);
  background: transparent;
  font-size: 0.65rem;
  font-weight: 700;
}

.bank-filters {
  display: flex;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--border-color);
}

.bank-filters span {
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--border-color);
  background: #fff;
  font-size: 0.58rem;
}

.bank-row {
  display: grid;
  grid-template-columns: 1.25rem 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background: #fff;
}

.bank-row.selected {
  background: #eff6ff;
}

.bank-row i {
  color: #94a3b8;
}

.bank-row.selected i {
  color: var(--primary-color);
}

.bank-row strong,
.bank-row small {
  display: block;
  font-size: 0.7rem;
}

.bank-row small {
  margin-top: 0.2rem;
  color: #94a3b8;
  font-size: 0.56rem;
}

.bank-row b {
  color: #64748b;
  font-size: 0.56rem;
}

.screen-live {
  padding: 0.25rem 0.5rem;
  color: #047857 !important;
  background: #ecfdf5;
}

.share-screen {
  padding-bottom: 1rem;
}

.share-screen > small {
  display: block;
  margin: 1.3rem 1.2rem 0.65rem;
}

.access-code {
  display: flex;
  gap: 0.4rem;
  margin: 0 1.2rem 1.25rem;
}

.access-code span {
  display: inline-flex;
  width: 2.2rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid var(--text-primary);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 1.1rem;
}

.share-rule {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: 0.7rem;
  margin: 0 1.2rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--border-color);
}

.share-rule > i {
  color: var(--primary-color);
}

.share-rule span,
.share-rule strong {
  display: block;
  font-size: 0.58rem;
}

.share-rule strong {
  margin-bottom: 0.12rem;
  font-size: 0.68rem;
}

.share-rule b {
  color: #047857;
  font-size: 0.58rem;
}

.response-head,
.response-row {
  display: grid;
  grid-template-columns: 1.2fr 0.85fr 0.65fr;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
}

.response-head {
  color: #94a3b8;
  font-size: 0.56rem;
  font-weight: 800;
  text-transform: uppercase;
}

.response-row {
  border-top: 1px solid var(--border-color);
  background: #fff;
  font-size: 0.65rem;
}

.response-row > span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.response-row > span i {
  display: inline-flex;
  width: 1.8rem;
  height: 1.8rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #1d4ed8;
  background: #dbeafe;
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 800;
}

.response-row progress {
  width: 100%;
  height: 0.32rem;
  border: 0;
  accent-color: var(--primary-color);
}

.response-row b {
  color: #a16207;
  font-size: 0.56rem;
}

.response-row b.done {
  color: #047857;
}

.result-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.3rem 1.1rem;
}

.result-summary > strong {
  font-family: var(--font-sans);
  font-size: 2.6rem;
  font-weight: 700;
}

.result-summary span,
.result-summary small {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
}

.result-summary small {
  margin-top: 0.25rem;
  color: #94a3b8;
  font-size: 0.56rem;
  font-weight: 400;
}

.result-line {
  display: grid;
  grid-template-columns: 1.2fr 1fr 2.5rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1.1rem;
  border-top: 1px solid var(--border-color);
  background: #fff;
  font-size: 0.62rem;
}

.result-line > i {
  height: 0.34rem;
  overflow: hidden;
  background: #e2e8f0;
}

.result-line > i b {
  display: block;
  height: 100%;
  background: var(--primary-color);
}

.result-line.attention > i b {
  background: #d97706;
}

.result-line > strong {
  text-align: right;
}

.type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  padding: 1.2rem;
}

.type-grid > div {
  display: flex;
  min-height: 105px;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: 0.85rem;
  border: 1px solid var(--border-color);
  background: #fff;
}

.type-grid > div.selected {
  border: 2px solid var(--primary-color);
  background: #eff6ff;
}

.type-grid i {
  margin-bottom: 0.55rem;
  color: var(--primary-color);
  font-size: 1.05rem;
}

.type-grid strong,
.type-grid small {
  display: block;
  font-size: 0.65rem;
}

.type-grid small {
  margin-top: 0.2rem;
  color: #94a3b8;
  font-size: 0.54rem;
}

.evaluation-flow {
  padding: 0.55rem 1.1rem;
}

.evaluation-flow > div,
.proctor-rule {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border-color);
}

.evaluation-flow i,
.proctor-rule i {
  color: var(--primary-color);
  font-size: 1rem;
}

.evaluation-flow span,
.evaluation-flow strong,
.proctor-rule span,
.proctor-rule strong {
  display: block;
  font-size: 0.58rem;
}

.evaluation-flow strong,
.proctor-rule strong {
  margin-bottom: 0.15rem;
  color: #334155;
  font-size: 0.68rem;
}

.evaluation-flow b,
.proctor-rule b {
  padding: 0.25rem 0.45rem;
  color: #047857;
  background: #ecfdf5;
  font-size: 0.52rem;
}

.evaluation-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 1.1rem 1rem;
  padding: 0.9rem 1rem;
  color: #fff;
  background: #172554;
}

.evaluation-total span {
  color: #bfdbfe;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.evaluation-total strong {
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 700;
}

.proctor-screen {
  padding-bottom: 0.75rem;
}

.proctor-rule {
  margin: 0 1.1rem;
}

.violation-action {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin: 0.85rem 1.1rem 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-color);
  background: #fff;
}

.violation-action span {
  grid-column: 1;
  color: #94a3b8;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.violation-action strong {
  grid-column: 1;
  margin-top: 0.15rem;
  font-size: 0.62rem;
}

.violation-action i {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: #64748b;
}

.tour-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.tour-controls > span {
  color: #94a3b8;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tour-controls .carousel-control-prev,
.tour-controls .carousel-control-next {
  display: inline-flex;
  position: static;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  background: #fff;
  opacity: 1;
}

.tour-controls .carousel-control-prev:hover,
.tour-controls .carousel-control-next:hover {
  border-color: var(--text-primary);
}

.workflow-section {
  margin: 2rem 0 7rem;
  padding: clamp(2rem, 5vw, 4.5rem);
  border: 1px solid var(--border-color);
  border-radius: 1.5rem;
  background: #fff;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--primary-color);
  font-weight: 700;
  text-decoration: none;
}

.text-link:hover {
  gap: 0.7rem;
}

.workflow-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workflow-list li {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border-color);
}

.workflow-list li:last-child {
  border-bottom: 0;
}

.workflow-list li > span {
  display: inline-flex;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.7rem;
  color: var(--primary-color);
  background: #eff6ff;
  font-size: 0.8rem;
  font-weight: 800;
}

.workflow-list strong,
.workflow-list small {
  display: block;
}

.workflow-list small {
  margin-top: 0.35rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.home-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 6rem;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: 1.5rem;
  color: #fff;
  background: #172554;
  box-shadow: 0 28px 55px -35px rgba(15, 23, 42, 0.9);
}

.home-cta h2 {
  color: #fff;
}

.home-cta p {
  margin-bottom: 0;
  color: #bfdbfe;
}

.eyebrow-dark {
  padding: 0;
  border: 0;
  color: #93c5fd;
  background: transparent;
}

.home-cta .btn {
  flex: 0 0 auto;
  color: #172554;
}

.closing-note {
  display: grid;
  grid-template-columns: minmax(170px, 0.55fr) minmax(300px, 1.4fr) auto;
  align-items: baseline;
  gap: 2rem;
  margin-bottom: 7rem;
  padding: 3rem 0 2.25rem;
  border-top: 2px solid var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

.closing-note > p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.closing-note h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(2.2rem, 4vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.closing-actions {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 0.55rem;
}

.closing-actions a {
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
}

.closing-actions a:first-child {
  padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--primary-color);
}

.closing-actions a:hover {
  color: var(--primary-color);
}

.closing-actions .closing-secondary {
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 500;
}

.footer {
  margin-top: 0;
  padding: 1.25rem 0;
  color: #94a3b8;
  background: #0f172a;
}

.footer-brand-mark {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 0.6rem;
  color: #38bdf8;
  background: rgba(14, 165, 233, 0.1);
  font-size: 1.05rem;
  line-height: 1;
}

@media (max-width: 991.98px) {
  .examifo-navbar .navbar-collapse {
    margin-top: 0.8rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.85rem;
    background: #fff;
  }

  .home-hero {
    padding-top: 4rem;
  }

  .hero-lower {
    grid-template-columns: 1fr;
  }

  .assessment-canvas {
    margin: 1rem 1.5rem 0 0;
  }

  .closing-note {
    grid-template-columns: 1fr 2fr;
  }

  .closing-actions {
    grid-column: 2;
    align-items: flex-start;
  }

  .tour-slide {
    grid-template-columns: 0.8fr 1.2fr;
  }

  .tour-copy {
    padding: 2rem;
  }

  .tour-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tour-tabs button {
    flex: 0 0 auto;
    min-width: 115px;
  }
}

@media (max-width: 767.98px) {
  .home-hero-title {
    font-size: clamp(3rem, 14vw, 4.5rem);
  }

  .home-hero-title span {
    margin-left: 0;
  }

  .hero-lower {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .home-trust-row {
    flex-wrap: wrap;
  }

  .home-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .home-hero-actions a {
    width: 100%;
  }

  .home-hero-actions .btn,
  .home-cta .btn {
    width: 100%;
    margin-bottom: 0;
  }

  .preview-metrics div {
    padding: 0 0.65rem;
  }

  .preview-metrics strong {
    font-size: 1.15rem;
  }

  .home-section {
    padding: 4.5rem 0;
  }

  .workflow-section {
    margin-bottom: 4.5rem;
  }

  .home-cta {
    align-items: stretch;
    flex-direction: column;
    margin-bottom: 4rem;
  }

  .assessment-canvas {
    margin-right: 0.75rem;
    box-shadow: 12px 14px 0 #dbeafe;
  }

  .canvas-ruler,
  .canvas-caption {
    display: none;
  }

  .closing-note {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 4.5rem;
  }

  .closing-actions {
    grid-column: 1;
  }

  .product-tour {
    padding-bottom: 4.5rem;
  }

  .question-types {
    padding-bottom: 4.5rem;
  }

  .question-types-heading {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .question-types-heading .eyebrow,
  .question-types-heading h2,
  .question-types-heading p {
    grid-column: 1;
    grid-row: auto;
  }

  .question-type-list {
    grid-template-columns: 1fr 1fr;
  }

  .question-type-list > div,
  .question-type-list > div:nth-child(3n),
  .question-type-list > div:nth-last-child(-n + 3) {
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
  }

  .question-type-list > div:nth-child(2n) {
    border-right: 0;
  }

  .question-type-list > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .tour-intro,
  .tour-slide {
    grid-template-columns: 1fr;
  }

  .tour-intro {
    gap: 1rem;
  }

  .tour-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tour-tabs::-webkit-scrollbar {
    display: none;
  }

  .tour-tabs button {
    flex: 0 0 auto;
    min-width: 105px;
  }

  .tour-slide {
    min-height: 0;
  }

  .tour-copy {
    border-right: 0;
    border-bottom: 1px solid var(--border-color);
  }

  .tour-screen {
    width: calc(100% - 2rem);
    min-height: 300px;
    margin: 1rem 1rem 2rem;
    box-shadow: 7px 8px 0 #e2e8f0;
  }

  .tour-controls {
    justify-content: space-between;
  }

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

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

/* Clockify-inspired homepage hierarchy */
.home-hero {
  position: relative;
  padding: clamp(4.5rem, 8vw, 7rem) 0 3.5rem;
  text-align: center;
}

.hero-kicker {
  display: inline-flex;
  align-self: center;
  margin-bottom: 1.25rem;
  color: var(--primary-color);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
}

.home-hero .home-hero-title {
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(2.9rem, 6vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.06em;
}

.home-hero .home-hero-title span {
  margin-left: 0;
  font-family: inherit;
  font-weight: 700;
}

.home-hero .home-hero-title .rotating-headline {
  display: grid;
  overflow: hidden;
  color: var(--primary-color);
}

.home-hero .home-hero-title .rotating-headline-item {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity 420ms ease, transform 420ms ease;
}

.home-hero .home-hero-title .rotating-headline-item.is-active {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .home-hero .home-hero-title .rotating-headline-item {
    transition: none;
  }
}

.home-hero > .home-hero-copy {
  max-width: 720px;
  margin: 1.5rem auto 0;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
}

.home-hero .hero-lower {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
}

.home-hero .home-hero-actions {
  flex-direction: row;
  gap: 0.75rem;
  margin-top: 2rem;
}

.home-hero .home-hero-actions a {
  min-height: 50px;
  padding: 0.85rem 1.35rem;
  border-radius: 0.35rem;
  font-size: 0.92rem;
}

.home-hero .home-hero-actions .hero-primary {
  color: #fff;
  background: var(--primary-color);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
}

.home-hero .home-hero-actions .hero-secondary {
  border: 1px solid var(--border-color);
  color: #334155;
  background: #fff;
}

.hero-proof {
  margin-top: 1rem;
  color: #64748b;
  font-size: 0.72rem;
}

.hero-proof i {
  margin-right: 0.35rem;
  color: var(--secondary-color);
}

.home-hero .home-trust-row {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  color: #475569;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}

.home-hero .home-trust-row span {
  display: flex;
  position: static;
  min-height: 82px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.8rem 0.5rem;
  border-right: 1px solid var(--border-color);
}

.home-hero .home-trust-row span::before {
  display: none;
}

.home-hero .home-trust-row span:last-child {
  border-right: 0;
}

.home-hero .home-trust-row i {
  color: var(--primary-color);
  font-size: 1.2rem;
}

.examifo-navbar .container {
  max-width: 1240px;
}

.examifo-navbar .navbar-collapse > .navbar-nav:first-child {
  justify-content: center;
}

.examifo-navbar .navbar-nav .btn-primary {
  border-radius: 0.3rem;
  box-shadow: none;
}

/* Keep the complete hero journey visible on typical laptop/desktop screens. */
@media (min-width: 768px) and (max-height: 900px) {
  .home-hero {
    padding-top: clamp(2.5rem, 5vh, 3.25rem);
    padding-bottom: 1.75rem;
  }

  .hero-kicker {
    margin-bottom: 0.9rem;
  }

  .home-hero .home-hero-title {
    font-size: clamp(2.65rem, 5vw, 4.35rem);
  }

  .home-hero > .home-hero-copy {
    margin-top: 1.1rem;
    line-height: 1.6;
  }

  .home-hero .home-hero-actions {
    margin-top: 1.4rem;
  }

  .hero-proof {
    margin-top: 0.8rem;
  }

  .home-hero .home-trust-row {
    margin-top: 1.65rem;
  }

  .home-hero .home-trust-row span {
    min-height: 72px;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }
}

@media (max-width: 991.98px) {
  .home-hero .home-trust-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .home-hero .home-trust-row span:nth-child(3) {
    border-right: 0;
  }

  .home-hero .home-trust-row span:nth-child(-n + 3) {
    border-bottom: 1px solid var(--border-color);
  }
}

@media (max-width: 767.98px) {
  .home-hero {
    padding-top: 3.75rem;
  }

  .home-hero .home-hero-actions {
    width: 100%;
    flex-direction: column;
  }

  .home-hero .home-trust-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-hero .home-trust-row span,
  .home-hero .home-trust-row span:nth-child(3) {
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
  }

  .home-hero .home-trust-row span:nth-child(2n) {
    border-right: 0;
  }

  .home-hero .home-trust-row span:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

/* Anchor the capability bar to the bottom of the opening desktop viewport. */
@media (min-width: 768px) {
  .home-hero {
    display: flex;
    min-height: calc(100svh - 72px);
    flex-direction: column;
    padding-bottom: 0;
  }

  .home-hero .hero-lower {
    flex: 1;
  }

  .home-hero .home-trust-row {
    margin-top: auto;
  }
}
.rich-question-content {
    overflow-wrap: anywhere;
}

.account-shell {
  max-width: 1120px;
  margin: 0 auto;
}

.account-nav a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem;
  border-radius: 0.65rem;
  color: #475569;
  text-decoration: none;
}

.account-nav a:hover,
.account-nav a.active {
  color: #1d4ed8;
  background: #eff6ff;
}

.account-nav a > i {
  font-size: 1.2rem;
}

.account-nav a span,
.account-nav a small {
  display: block;
}

.account-nav a span {
  font-weight: 700;
}

.account-nav a small {
  margin-top: 0.1rem;
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 500;
}

.account-card-icon,
.security-status {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.8rem;
  color: #1d4ed8;
  background: #dbeafe;
  font-size: 1.35rem;
}

.security-status {
  width: 4.5rem;
  height: 4.5rem;
  flex: 0 0 auto;
  color: #b45309;
  background: #fef3c7;
  font-size: 2rem;
}

.security-status.enabled {
  color: #047857;
  background: #d1fae5;
}

.authenticator-qr {
  padding: 1.5rem;
  border: 1px solid #dbeafe;
  border-radius: 1rem;
  background: #f8fafc;
  text-align: center;
}

.authenticator-qr #qrCode {
  display: inline-block;
  min-width: 190px;
  min-height: 190px;
  padding: 0.5rem;
  background: #fff;
}

.authenticator-qr span {
  display: block;
  margin-top: 0.75rem;
  color: #64748b;
  font-size: 0.8rem;
}

.authenticator-steps {
  display: grid;
  gap: 1.1rem;
  padding-left: 1.25rem;
}

.authenticator-steps strong,
.authenticator-steps span {
  display: block;
}

.authenticator-steps span {
  margin-top: 0.2rem;
  color: #64748b;
  font-size: 0.85rem;
}

.authenticator-key {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.4rem;
  background: #f1f5f9;
  color: #0f172a;
  letter-spacing: 0.08em;
}

.authenticator-code {
  max-width: 13rem;
  letter-spacing: 0.3em;
  font-weight: 700;
}

.recovery-code-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.recovery-code-grid code {
  padding: 0.8rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #f8fafc;
  color: #0f172a;
  text-align: center;
}

.rich-question-content > :last-child {
    margin-bottom: 0;
}

.rich-question-content pre {
    position: relative;
    overflow-x: auto;
    min-height: 3rem;
    padding: 1.75rem 1rem 1rem;
    color: #e2e8f0;
    background: #0f172a;
    border-radius: .65rem;
}

.rich-question-content pre[data-language]::before {
    content: attr(data-language);
    position: absolute;
    top: .35rem;
    right: .65rem;
    color: #94a3b8;
    font: 600 .7rem/1 var(--bs-font-monospace);
    text-transform: uppercase;
}

.rich-question-content pre code {
    display: block;
    color: inherit;
    white-space: pre;
}

.rich-question-content code {
    font-family: var(--bs-font-monospace);
}

.rich-question-content :not(pre) > code {
    padding: .12rem .35rem;
    color: #9f1239;
    background: #f1f5f9;
    border-radius: .25rem;
}

.rich-question-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1rem auto;
    border-radius: .5rem;
}

.rich-question-preview {
    min-height: 5rem;
}

.rich-question-preview:empty::before {
    content: "Preview";
    color: var(--bs-secondary-color);
}

.rich-question-editor .toastui-editor-defaultUI {
    border-color: var(--bs-border-color);
    border-radius: .5rem;
    overflow: hidden;
}

.rich-question-editor .toastui-editor-contents pre {
    background: #0f172a;
}

/* Public policy and payment-review pages */
.legal-page { max-width: 960px; margin: 0 auto; padding: 3rem 0 4rem; }
.legal-hero {
    padding: 2.5rem; margin-bottom: 1.5rem; border-radius: 1.35rem; color: #fff;
    background: linear-gradient(125deg, #172554, #4338ca 65%, #6366f1);
    box-shadow: 0 20px 50px rgba(30, 41, 99, .16);
}
.legal-hero h1 { margin: .35rem 0 .6rem; font-weight: 800; }
.legal-hero p { max-width: 680px; margin-bottom: .75rem; color: rgba(255, 255, 255, .82); }
.legal-hero small { color: rgba(255, 255, 255, .68); }
.legal-kicker {
    font-size: .75rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: #c7d2fe;
}
.legal-card, .contact-card {
    padding: 2rem; border: 1px solid #e2e8f0; border-radius: 1.1rem;
    background: #fff; box-shadow: 0 12px 35px rgba(15, 23, 42, .06);
}
.legal-card section + section {
    padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid #eef2f7;
}
.legal-card h2, .contact-card h2 {
    margin-bottom: .65rem; color: #172033; font-size: 1.15rem; font-weight: 750;
}
.legal-card p, .contact-card p { line-height: 1.75; color: #526076; }
.legal-callout {
    display: flex; align-items: center; gap: 1rem; padding: 1.15rem;
    margin-top: 2rem; border-radius: .85rem; background: #eef2ff;
}
.legal-callout span { flex: 1; color: #526076; }
.contact-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
}
.contact-card > i {
    display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
    margin-bottom: 1rem; border-radius: .75rem; color: #4338ca;
    background: #eef2ff; font-size: 1.25rem;
}
.contact-card a { font-weight: 700; }
.footer-policy-links {
    display: flex; justify-content: flex-end; align-items: center;
    gap: .85rem; flex-wrap: wrap;
}
.footer-policy-links a { color: inherit; text-decoration: none; }
.footer-policy-links a:hover { color: var(--primary-color); }
.billing-policy-note {
    max-width: 760px; margin: 2rem auto 0; text-align: center;
    color: #64748b; font-size: .9rem;
}
@media (max-width: 767.98px) {
    .legal-page { padding: 1.5rem 0 3rem; }
    .legal-hero, .legal-card { padding: 1.4rem; }
    .contact-grid { grid-template-columns: 1fr; }
    .legal-callout { align-items: flex-start; flex-direction: column; }
    .footer-policy-links { justify-content: center; }
}
/* Founding 50 campaign */
.campaign-offer-modal .modal-dialog{max-width:540px}.campaign-offer-modal .modal-content{position:relative;padding:2.75rem;border:0;border-radius:26px;overflow:hidden;background:linear-gradient(145deg,#fff 0%,#f6f3ff 100%);box-shadow:0 30px 90px #10223f45}.campaign-offer-modal .modal-content:before{content:"";position:absolute;width:220px;height:220px;right:-90px;top:-110px;border-radius:50%;background:#6d4aff14}.campaign-offer-close{position:absolute;z-index:1;right:1.25rem;top:1.25rem}.campaign-offer-icon{display:grid;place-items:center;width:54px;height:54px;margin-bottom:1.25rem;border-radius:16px;background:#6d4aff;color:#fff;font-size:1.45rem;box-shadow:0 12px 28px #6d4aff38}.campaign-offer-eyebrow{color:#6d4aff;font-size:.72rem;font-weight:800;letter-spacing:.14em}.campaign-offer-modal h2{margin:.65rem 0 1rem;color:#10223f;font-size:clamp(2rem,6vw,3.2rem);font-weight:800;line-height:1;letter-spacing:-.055em}.campaign-offer-modal p{max-width:430px;color:#5d6b80;font-size:1.05rem}.campaign-offer-points{display:flex;gap:1rem;flex-wrap:wrap;margin:1.35rem 0 1.6rem;color:#344054;font-size:.84rem;font-weight:700}.campaign-offer-points span{display:flex;gap:.4rem;align-items:center}.campaign-offer-points i{color:#198754}.campaign-offer-modal .btn-primary{display:flex;justify-content:center;gap:.6rem;align-items:center;width:100%;background:#6d4aff;border-color:#6d4aff}.campaign-offer-later{display:block;margin:.85rem auto 0;border:0;background:transparent;color:#667085;font-size:.82rem}.campaign-offer-later:hover{color:#10223f}
.founding-home-banner{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin:1rem 0 0;padding:.85rem 1.15rem;border-radius:14px;background:#14213d;color:#fff;text-decoration:none;font-size:.9rem}.founding-home-banner:hover{color:#fff;background:#1c2d51}.founding-home-banner b{white-space:nowrap}.campaign-nav-link{color:#6d4aff!important}.founding-page{--ink:#10223f;--violet:#6d4aff;margin-top:1.25rem}.founding-hero{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:4rem;align-items:center;padding:5rem;border-radius:28px;background:linear-gradient(135deg,#10223f 0%,#183b68 62%,#6140dd 140%);color:#fff;overflow:hidden}.founding-badge{display:inline-flex;gap:.5rem;align-items:center;padding:.5rem .8rem;border:1px solid #ffffff36;border-radius:99px;background:#ffffff12;font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}.founding-hero h1{font-size:clamp(3rem,7vw,6rem);line-height:.93;letter-spacing:-.07em;margin:1.5rem 0}.founding-hero h1 em{color:#b9aaff;font-style:normal}.founding-hero>div>p{max-width:720px;font-size:1.2rem;color:#d6e0ef}.founding-actions{display:flex;gap:.75rem;margin:2rem 0}.founding-trust{display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.85rem;color:#d6e0ef}.founding-trust span{display:flex;gap:.4rem}.founding-hero aside{padding:2rem;border:1px solid #ffffff2e;border-radius:22px;background:#ffffff12;backdrop-filter:blur(10px)}.founding-hero aside>span{font-size:.72rem;letter-spacing:.18em}.founding-hero aside>strong{display:block;font-size:6rem;line-height:1;margin-top:1rem}.founding-hero aside>b{font-size:1.25rem}.founding-hero aside hr{border-color:#fff;margin:2rem 0}.founding-section,.founding-faq{padding:6rem 2rem}.founding-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.5rem}.founding-benefits article{padding:2rem;border:1px solid #e2e8f0;border-radius:18px;background:#fff}.founding-benefits i{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#ede9ff;color:var(--violet);font-size:1.3rem}.founding-benefits h3{font-size:1.1rem;margin:1.5rem 0 .5rem}.founding-benefits p{color:#667085;margin:0}.founding-process{display:grid;grid-template-columns:1fr 1fr;gap:5rem;padding:5rem;border-radius:28px;background:#f1f4f9}.founding-process h2,.founding-apply h2,.founding-faq h2{color:var(--ink);font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.05em}.founding-process ol{list-style:none;margin:0;padding:0}.founding-process li{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid #d7deea}.founding-process li>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700}.founding-process li strong,.founding-process li small{display:block}.founding-process li small{color:#667085}.founding-apply{display:grid;grid-template-columns:.8fr 1.2fr;gap:5rem;padding:6rem 2rem}.founding-apply>div:first-child{padding-top:2rem}.founding-apply ul{padding-left:1.2rem;line-height:2}.founding-form-card{padding:2.25rem;border:1px solid #e2e8f0;border-radius:22px;box-shadow:0 24px 60px #10223f14;background:#fff}.founding-form-card label{display:block;font-size:.85rem;font-weight:700;margin-bottom:.4rem}.founding-form-card .field-validation-error{display:block;color:#dc3545;font-size:.78rem;margin-top:.25rem}.founding-form-card .form-check-label{font-weight:500}.form-note{text-align:center;color:#667085;font-size:.78rem;margin:.8rem 0 0}.founding-success{text-align:center;padding:4rem 1rem}.founding-success>i{font-size:3rem;color:#198754}.founding-faq{max-width:950px;margin:auto}.founding-faq .accordion{margin-top:2rem}.founding-faq .accordion-item{border-left:0;border-right:0}.founding-dashboard-card{padding:1.5rem;margin-bottom:1.5rem;border-radius:18px;background:linear-gradient(120deg,#10223f,#274d7c);color:#fff}.founding-dashboard-head{display:flex;justify-content:space-between}.founding-dashboard-head span{font-size:.75rem;letter-spacing:.12em;color:#b9aaff}.founding-dashboard-head h2{font-size:1.3rem;margin:.4rem 0}.founding-dashboard-head p{color:#d6e0ef;margin:0}.founding-dashboard-head>strong{font-size:2rem}.founding-checklist{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:1.25rem}.founding-checklist a,.founding-checklist span{display:flex;gap:.5rem;padding:.75rem;border-radius:10px;background:#ffffff12;color:#fff;text-decoration:none;font-size:.85rem}.founding-checklist .done{color:#bfe9d1}.legal-page{max-width:900px;margin:3rem auto}.legal-content{line-height:1.8}.legal-content h2{margin-top:2rem;font-size:1.25rem}
@media(max-width:991px){.founding-hero{grid-template-columns:1fr;padding:3rem}.founding-hero aside{display:none}.founding-benefits{grid-template-columns:1fr 1fr}.founding-process,.founding-apply{grid-template-columns:1fr;gap:2rem}.founding-checklist{grid-template-columns:1fr 1fr}}
@media(max-width:575px){.campaign-offer-modal .modal-dialog{margin:.75rem}.campaign-offer-modal .modal-content{padding:2rem 1.4rem}.campaign-offer-points{display:grid;gap:.55rem}.founding-home-banner{align-items:flex-start}.founding-home-banner b{display:none}.founding-hero{padding:2rem 1.25rem}.founding-actions{flex-direction:column}.founding-benefits{grid-template-columns:1fr}.founding-section,.founding-faq,.founding-apply{padding:4rem 0}.founding-process{padding:2rem 1.25rem}.founding-form-card{padding:1.25rem}.founding-checklist{grid-template-columns:1fr}}
/* Search landing pages */
.seo-page{--seo-ink:#10223f;--seo-muted:#607087;--seo-line:#dfe5ed;margin-top:1.5rem;color:var(--seo-ink)}.seo-breadcrumb{display:flex;align-items:center;gap:.5rem;margin:1rem 0 2rem;color:var(--seo-muted);font-size:.82rem}.seo-breadcrumb a{color:var(--seo-muted)}.seo-breadcrumb i{font-size:.65rem}.seo-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:5rem;align-items:center;padding:4.75rem;border-radius:28px;background:#f2f5f9}.seo-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.14em;color:#6246d9}.seo-hero h1{max-width:850px;margin:1.1rem 0 1.5rem;font-size:clamp(3rem,6vw,5.7rem);line-height:.96;letter-spacing:-.065em}.seo-hero>div>p{max-width:760px;color:var(--seo-muted);font-size:1.15rem;line-height:1.7}.seo-actions{display:flex;gap:.75rem;margin:2rem 0 1rem}.seo-hero small{color:var(--seo-muted)}.seo-hero small i{color:#198754;margin-right:.4rem}.seo-product-card{padding:2rem;border-radius:22px;background:var(--seo-ink);color:#fff;box-shadow:0 28px 60px #10223f24}.seo-product-card>span{font-size:.68rem;letter-spacing:.16em;color:#ac9cff}.seo-product-card ol{list-style:none;margin:1.5rem 0 0;padding:0}.seo-product-card li{display:flex;align-items:center;gap:1rem;padding:1.1rem 0;border-bottom:1px solid #ffffff20}.seo-product-card li:last-child{border:0}.seo-product-card li i{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#ffffff12;color:#b9aaff}.seo-problem,.seo-section-heading{display:grid;grid-template-columns:80px 1fr;gap:2rem}.seo-problem{padding:7rem 4rem;max-width:1050px}.seo-section-number{font-size:.78rem;color:#7a879a}.seo-problem h2,.seo-section-heading h2,.seo-workflow h2,.seo-responsibility h2,.seo-closing h2{margin:.75rem 0 1rem;font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.05em}.seo-problem p{max-width:800px;color:var(--seo-muted);font-size:1.08rem;line-height:1.8}.seo-benefit-section,.seo-related{padding:5rem 4rem;border-top:1px solid var(--seo-line)}.seo-benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2.5rem 0 0 112px}.seo-benefit-grid article{padding:2rem;border:1px solid var(--seo-line);border-radius:18px}.seo-benefit-grid article>i{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:#ece8ff;color:#6246d9;font-size:1.25rem}.seo-benefit-grid h3{font-size:1.1rem;margin:1.4rem 0 .5rem}.seo-benefit-grid p{color:var(--seo-muted);line-height:1.65;margin:0}.seo-workflow{display:grid;grid-template-columns:.85fr 1.15fr;gap:5rem;margin:3rem 0;padding:5rem;border-radius:28px;background:var(--seo-ink);color:#fff}.seo-workflow>div>p{color:#c7d0dd;line-height:1.7}.seo-workflow ol{list-style:none;padding:0;margin:0}.seo-workflow li{display:grid;grid-template-columns:42px 1fr;gap:1rem;align-items:start;padding:1rem 0;border-bottom:1px solid #ffffff20}.seo-workflow li>span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#7359e8;font-weight:700}.seo-workflow li p{margin:.4rem 0;color:#e0e6ef}.seo-responsibility{display:grid;grid-template-columns:80px 1fr;gap:2rem;max-width:1000px;padding:7rem 4rem}.seo-responsibility>i{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:#e7f6ed;color:#198754;font-size:1.6rem}.seo-responsibility p{color:var(--seo-muted);line-height:1.8}.seo-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin:2.5rem 0 0 112px}.seo-related-grid a{display:flex;justify-content:space-between;gap:1rem;padding:1.25rem;border:1px solid var(--seo-line);border-radius:12px;color:var(--seo-ink);font-weight:700;text-decoration:none}.seo-related-grid a:hover{border-color:#6246d9;color:#6246d9}.seo-closing{text-align:center;margin:4rem 0 1rem;padding:5rem 2rem;border-radius:28px;background:linear-gradient(135deg,#10223f,#5f43d5);color:#fff}.seo-closing p{max-width:680px;margin:0 auto 2rem;color:#dbe2ec}.seo-closing .seo-eyebrow{color:#c2b8ff}.seo-closing>div{display:flex;justify-content:center;gap:.75rem}
@media(max-width:991px){.seo-hero{grid-template-columns:1fr;padding:3rem}.seo-product-card{display:none}.seo-benefit-grid,.seo-related-grid{grid-template-columns:1fr 1fr}.seo-workflow{grid-template-columns:1fr;gap:2rem}.seo-problem,.seo-benefit-section,.seo-related,.seo-responsibility{padding-left:1.5rem;padding-right:1.5rem}}
@media(max-width:575px){.seo-hero{padding:2.5rem 1.25rem}.seo-actions,.seo-closing>div{flex-direction:column}.seo-problem,.seo-section-heading,.seo-responsibility{grid-template-columns:1fr}.seo-section-number{display:none}.seo-benefit-grid,.seo-related-grid{grid-template-columns:1fr;margin-left:0}.seo-workflow{padding:2rem 1.25rem}.seo-benefit-section,.seo-related,.seo-problem,.seo-responsibility{padding-top:4rem;padding-bottom:4rem}}