/*
 * Trimoji "d1" design language for the assessment app (trimoji/DESIGN.md).
 * Light and calm: off-white surfaces, white cards with hairline rings, big soft shadows,
 * navy titles with tight tracking, small uppercase eyebrows, pills everywhere.
 * Colour is an accent: the brand gradient appears as text, rails, glows and outlines.
 *
 * Loaded after Bootstrap / the legacy theme. `html.is-iframe` = embedded by a partner.
 */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: block; src: url('../fonts/inter/inter-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: block; src: url('../fonts/inter/inter-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: block; src: url('../fonts/inter/inter-400-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: block; src: url('../fonts/inter/inter-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: block; src: url('../fonts/inter/inter-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: block; src: url('../fonts/inter/inter-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: block; src: url('../fonts/inter/inter-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: block; src: url('../fonts/inter/inter-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: block; src: url('../fonts/inter/inter-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: block; src: url('../fonts/inter/inter-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */
:root {
  --tm-bg: #f7f8fd;
  --tm-bg-2: #eef1fb;
  --tm-bg-3: #f5f7fc;
  --tm-card: #ffffff;
  --tm-line: rgba(13, 30, 83, .09);
  --tm-line-strong: rgba(13, 30, 83, .18);
  --tm-ring: 0 0 0 1px rgba(13, 30, 83, .09) inset;
  --tm-ring-strong: 0 0 0 1px rgba(13, 30, 83, .18) inset;
  --tm-text: #0d1e53;
  --tm-ink: #0d1e53;
  --tm-ink-hover: #1a2f6e;
  --tm-body: #3b4570;
  --tm-muted: #5a6389;
  --tm-faint: #8a91b0;
  --tm-pink: #e5007e;
  --tm-blue: #4396f1;
  --tm-blue-deep: #2f6fe0;
  --tm-orange: #ff9f5a;
  --tm-green: #10b981;
  --tm-violet: #9b2cff;
  --tm-grad: linear-gradient(100deg, #2f6fe0 0%, #4396f1 18%, #e5007e 60%, #ff8a3d 100%);
  --tm-grad-btn: linear-gradient(135deg, #e5007e, #9b2cff 55%, #4396f1);
  --tm-shadow-sm: 0 1px 2px rgba(13, 30, 83, .04), 0 8px 24px -14px rgba(13, 30, 83, .18);
  --tm-shadow: 0 1px 2px rgba(13, 30, 83, .04), 0 12px 40px -12px rgba(13, 30, 83, .14);
  --tm-shadow-lg: 0 40px 80px -40px rgba(13, 30, 83, .35);
  --tm-shadow-pink: 0 12px 30px -10px rgba(229, 0, 126, .55);
  --tm-focus: 0 0 0 4px rgba(67, 150, 241, .15);
  --tm-ease: cubic-bezier(.2, .7, .2, 1);
  --tm-font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Base ---------- */
html, body { background: var(--tm-bg); }
body {
  font-family: var(--tm-font) !important;
  color: var(--tm-body);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11';
}
/* Override the legacy Nunito rules on text elements only (icon fonts live on <i>). */
h1, h2, h3, h4, h5, h6, p, a, span, label, li, div, button, input, select, textarea, small, strong, b, td, th { font-family: var(--tm-font); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--tm-text); font-weight: 600; letter-spacing: -.025em; }
a { color: var(--tm-blue-deep); }
a:hover { color: var(--tm-pink); }
::selection { background: rgba(229, 0, 126, .14); }

/* Bootstrap remaps */
.text-muted { color: var(--tm-muted) !important; }
.text-primary { color: var(--tm-text) !important; }
.bg-light { background: var(--tm-bg-3) !important; }

.btn {
  font-weight: 600;
  letter-spacing: -.005em;
  border-radius: 999px;
  transition: transform .2s var(--tm-ease), box-shadow .2s var(--tm-ease), background .2s var(--tm-ease);
}
.btn-primary, .btn-primary:not(:disabled):not(.disabled):active {
  background: var(--tm-ink);
  border-color: var(--tm-ink);
  color: #fff;
  box-shadow: 0 10px 24px -14px rgba(13, 30, 83, .7);
}
.btn-primary:hover, .btn-primary:focus { background: var(--tm-ink-hover); border-color: var(--tm-ink-hover); color: #fff; transform: translateY(-1px); }
.btn-light, .btn-outline-primary {
  background: #fff;
  color: var(--tm-text);
  border-color: transparent;
  box-shadow: var(--tm-ring-strong), 0 1px 2px rgba(13, 30, 83, .05);
}
.btn-light:hover, .btn-outline-primary:hover { background: #fff; color: var(--tm-text); box-shadow: 0 0 0 1px rgba(13, 30, 83, .28) inset, var(--tm-shadow-sm); transform: translateY(-1px); }
.btn.disabled, .btn:disabled { opacity: .45; transform: none; box-shadow: none; }

.form-control, .custom-select {
  border-radius: 14px;
  border: 1px solid rgba(13, 30, 83, .12);
  background-color: #fff;
  color: var(--tm-text);
  font-size: 15px;
  height: 48px;
  box-shadow: 0 1px 2px rgba(13, 30, 83, .04);
  transition: border-color .2s var(--tm-ease), box-shadow .2s var(--tm-ease);
}
textarea.form-control { height: auto; }
.form-control::placeholder { color: var(--tm-faint); }
.form-control:focus, .custom-select:focus { border-color: var(--tm-pink); box-shadow: var(--tm-focus); color: var(--tm-text); }

.card { border: 0; border-radius: 20px; box-shadow: 0 0 0 1px rgba(13, 30, 83, .08), var(--tm-shadow); }
.modal-content { border: 0; border-radius: 22px; box-shadow: var(--tm-shadow-lg), 0 0 0 1px rgba(13, 30, 83, .06); }
.modal-header, .modal-footer { border-color: var(--tm-line); }
.modal-title { font-weight: 600; letter-spacing: -.02em; color: var(--tm-text); }
.progress { background: var(--tm-bg-2); border-radius: 999px; box-shadow: var(--tm-ring); overflow: hidden; }
.progress-bar { background: var(--tm-ink); border-radius: 999px; }

/* ---------- d1 vocabulary ---------- */
/* Pages start under the floating header (it overlays them). */
.d1-page { position: relative; min-height: calc(100vh - 80px); padding: 104px 20px 72px; overflow: hidden; }
@media (min-width: 992px) { .d1-page { padding-top: 76px; } }
.d1-page::before {
  /* hero glow + faded grid */
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 680px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(520px 320px at 12% 0%, rgba(67, 150, 241, .14), transparent 70%),
    radial-gradient(460px 300px at 92% 4%, rgba(255, 159, 90, .13), transparent 70%),
    radial-gradient(560px 340px at 55% 30%, rgba(229, 0, 126, .06), transparent 70%),
    linear-gradient(rgba(13, 30, 83, .035) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(13, 30, 83, .035) 1px, transparent 1px) 0 0 / 64px 64px;
  -webkit-mask-image: radial-gradient(90% 80% at 50% 0%, #000 40%, transparent 85%);
  mask-image: radial-gradient(90% 80% at 50% 0%, #000 40%, transparent 85%);
}
.d1-page > * { position: relative; z-index: 1; }
.d1-wrap { width: min(560px, 100%); margin: 0 auto; }
.d1-wrap--md { width: min(760px, 100%); margin: 0 auto; }
.d1-wrap--lg { width: min(1040px, 100%); margin: 0 auto; }

.d1-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tm-blue-deep);
}
.d1-eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tm-pink);
  box-shadow: 0 0 0 4px rgba(229, 0, 126, .15), 0 0 12px rgba(229, 0, 126, .6);
}
.d1-title { font-size: clamp(28px, 4.2vw, 42px); line-height: 1.04; font-weight: 600; letter-spacing: -.045em; color: var(--tm-text); margin: 0; }
.d1-h2 { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; font-weight: 600; letter-spacing: -.035em; color: var(--tm-text); margin: 0; }
.d1-h3 { font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; color: var(--tm-text); margin: 0; }
.d1-lead { font-size: 16.5px; line-height: 1.65; color: var(--tm-muted); margin: 0; }
.d1-muted { color: var(--tm-muted); }
.d1-small { font-size: 13px; line-height: 1.55; color: var(--tm-muted); }
.d1-grad { background: var(--tm-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.d1-rule { width: 56px; height: 3px; border-radius: 3px; background: var(--tm-grad); }
.d1-stack { display: flex; flex-direction: column; gap: 14px; }
.d1-center { text-align: center; align-items: center; }

.d1-card {
  position: relative;
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--tm-ring), var(--tm-shadow);
  padding: 28px;
}
.d1-card--soft { background: var(--tm-bg-3); box-shadow: var(--tm-ring); }
.d1-card--glass { background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.d1-card--rail { overflow: hidden; }
.d1-card--rail::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--tm-grad); }
.d1-card--outline { border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--tm-grad) border-box; }

.d1-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--tm-ink);
  color: #fff !important;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 14px 30px -14px rgba(13, 30, 83, .8);
  transition: transform .25s var(--tm-ease), box-shadow .25s var(--tm-ease), background .25s var(--tm-ease), opacity .2s;
}
.d1-btn:hover { background: var(--tm-ink-hover); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 18px 36px -14px rgba(13, 30, 83, .85); }
.d1-btn:focus { outline: none; box-shadow: var(--tm-focus), 0 14px 30px -14px rgba(13, 30, 83, .8); }
.d1-btn .d1-arrow { transition: transform .25s var(--tm-ease); }
.d1-btn:hover .d1-arrow { transform: translateX(3px); }
.d1-btn[disabled], .d1-btn.is-disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.d1-btn--block { width: 100%; }
.d1-btn--ghost { background: #fff; color: var(--tm-text) !important; box-shadow: var(--tm-ring-strong), 0 1px 2px rgba(13, 30, 83, .05); }
.d1-btn--ghost:hover { background: #fff; box-shadow: 0 0 0 1px rgba(13, 30, 83, .28) inset, var(--tm-shadow-sm); }
.d1-btn--blue { background: var(--tm-blue); box-shadow: 0 14px 30px -14px rgba(67, 150, 241, .9); }
.d1-btn--blue:hover { background: #2f86e8; }
.d1-btn--danger { background: #fff; color: var(--tm-pink) !important; box-shadow: 0 0 0 1px rgba(229, 0, 126, .3) inset; }
.d1-btn--danger:hover { background: rgba(229, 0, 126, .05); box-shadow: 0 0 0 1px rgba(229, 0, 126, .5) inset; }
.d1-btn--outline {
  /* gradient outline CTA */
  background: linear-gradient(#fff, #fff) padding-box, var(--tm-grad) border-box;
  border: 1.5px solid transparent;
  color: var(--tm-text) !important;
  box-shadow: var(--tm-shadow-sm);
}
.d1-btn--outline:hover { background: linear-gradient(#fff, #fff) padding-box, var(--tm-grad) border-box; }
.d1-btn--sm { min-height: 38px; padding: 0 16px; font-size: 13.5px; }

.d1-field { position: relative; display: block; }
.d1-field__icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; width: 17px; height: 17px; color: var(--tm-faint); pointer-events: none; z-index: 1; }
.d1-field__icon i-feather { display: flex; width: 17px; height: 17px; }
.d1-field__icon svg { width: 17px; height: 17px; }
.d1-input {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border-radius: 16px;
  border: 1px solid rgba(13, 30, 83, .12);
  background: #fff;
  color: var(--tm-text);
  font-size: 15px;
  box-shadow: 0 1px 2px rgba(13, 30, 83, .04);
  transition: border-color .2s var(--tm-ease), box-shadow .2s var(--tm-ease);
  -webkit-appearance: none;
  appearance: none;
}
.d1-field__icon + .d1-input, .d1-field__icon ~ .d1-input { padding-left: 46px; }
.d1-input::placeholder { color: var(--tm-faint); }
.d1-input:focus { outline: none; border-color: var(--tm-pink); box-shadow: var(--tm-focus); }
.d1-input.is-invalid, .d1-input.empty-input { border-color: rgba(229, 0, 126, .55); background: rgba(229, 0, 126, .03); }
select.d1-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6389' 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 18px center;
  padding-right: 42px;
}
.d1-label { display: block; font-size: 13px; font-weight: 600; color: var(--tm-text); margin-bottom: 8px; }
.d1-error { font-size: 12.5px; color: #c40070; }

.d1-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 13px; line-height: 1.55; color: var(--tm-muted); }
.d1-check input { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border-radius: 6px; background: #fff; box-shadow: var(--tm-ring-strong); cursor: pointer; transition: background .2s, box-shadow .2s; }
.d1-check input:checked { background: var(--tm-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat; box-shadow: none; }
.d1-check input:focus { outline: none; box-shadow: var(--tm-focus), var(--tm-ring-strong); }
.d1-check.is-invalid input { box-shadow: 0 0 0 1.5px rgba(229, 0, 126, .6) inset; }
.d1-check a { color: var(--tm-blue-deep); font-weight: 500; }

.d1-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.d1-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #eaf3ff; box-shadow: 0 0 0 1px rgba(67, 150, 241, .28) inset; color: #1f5fc7; font-size: 12.5px; font-weight: 600; }
.d1-chip--ink { background: var(--tm-bg-2); box-shadow: var(--tm-ring); color: var(--tm-text); }

/* Segmented control (radio pills) */
.d1-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 5px; border-radius: 999px; background: var(--tm-bg-2); box-shadow: var(--tm-ring); }
.d1-seg input { position: absolute; opacity: 0; pointer-events: none; }
.d1-seg label { margin: 0; padding: 11px 12px; border-radius: 999px; text-align: center; font-size: 14px; font-weight: 600; color: var(--tm-muted); cursor: pointer; transition: background .25s var(--tm-ease), color .25s, box-shadow .25s; }
.d1-seg label:hover { color: var(--tm-text); background: rgba(255, 255, 255, .6); }
.d1-seg input:checked + label { background: var(--tm-ink); color: #fff; box-shadow: 0 8px 18px -10px rgba(13, 30, 83, .7); }
.d1-seg input:focus-visible + label { box-shadow: var(--tm-focus); }

/* Progress */
.d1-progress { position: relative; height: 8px; border-radius: 999px; background: var(--tm-bg-2); box-shadow: var(--tm-ring); overflow: hidden; }
.d1-progress > span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--tm-ink); transition: width .5s var(--tm-ease); }
.d1-progress > span::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 28px; border-radius: 999px; background: var(--tm-grad); }

/*
 * Likert scale: the historical glued pill (rounded ends, rectangular middle segments),
 * five identical same-colour steps so that no answer looks "better" (no induced bias).
 * The chosen step only changes by shape/contrast (navy fill + white dot), never by hue scale.
 */
.d1-likert {
  --seg: clamp(52px, 13vw, 76px);
  display: inline-flex;
  align-items: stretch;
  padding: 3px;
  gap: 3px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(13, 30, 83, .1) inset, 0 14px 30px -18px rgba(67, 150, 241, .7);
}
.d1-likert label { margin: 0; cursor: pointer; display: block; }
.d1-likert input { position: absolute; opacity: 0; pointer-events: none; }
.d1-likert__dot {
  position: relative;
  display: block;
  width: var(--seg);
  height: 50px;
  background: var(--tm-blue);
  transition: background .2s var(--tm-ease), box-shadow .2s var(--tm-ease);
}
.d1-likert label:first-child .d1-likert__dot { border-radius: 999px 6px 6px 999px; }
.d1-likert label:last-child .d1-likert__dot { border-radius: 6px 999px 999px 6px; }
.d1-likert label:not(:first-child):not(:last-child) .d1-likert__dot { border-radius: 6px; }
.d1-likert__dot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform .2s var(--tm-ease);
}
.d1-likert label:hover .d1-likert__dot { background: #5ba5f4; }
.d1-likert input:checked + .d1-likert__dot { background: var(--tm-ink); box-shadow: 0 8px 18px -8px rgba(13, 30, 83, .7); }
.d1-likert input:checked + .d1-likert__dot::after { transform: scale(1); }
.d1-likert input:focus-visible + .d1-likert__dot { box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(67, 150, 241, .45); }
.d1-likert__ends {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: calc(var(--seg, 76px) * 5 + 18px);
  max-width: 100%;
  margin: 12px auto 0 !important;
  font-size: 13px;
  font-weight: 600;
  color: var(--tm-muted);
}
.d1-likert + .d1-likert__ends { --seg: clamp(52px, 13vw, 76px); }

/* Loader */
.d1-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(247, 248, 253, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: d1Fade .3s var(--tm-ease) both;
}
.d1-loader-overlay.is-leaving { animation: d1FadeOut .45s var(--tm-ease) both; }
.d1-spinner { width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(from 0deg, #2f6fe0, #e5007e, #ff8a3d, #2f6fe0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); animation: d1Spin 1s linear infinite; }

.d1-powered { display: inline-block; margin-top: 18px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tm-faint) !important; text-decoration: none !important; }
.d1-powered:hover { color: var(--tm-pink) !important; }

/* Motion */
.d1-rise { animation: d1Rise .7s var(--tm-ease) both; }
@keyframes d1Rise { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes d1Fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes d1FadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes d1Spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .d1-rise, .d1-spinner { animation: none !important; }
  .d1-btn, .d1-likert__dot { transition: none !important; }
}

/* ---------- Embedded by a partner (iframe) ----------
 * Neutral backdrop (the host page owns the branding), no decorative glows, compact spacing,
 * no fixed/floating widgets, nothing wider than the frame. */
html.is-iframe, html.is-iframe body { background: #fff; }
html.is-iframe .d1-page { min-height: 0; padding: 20px 14px 28px !important; overflow: visible; }
html.is-iframe .d1-page::before { display: none; }
html.is-iframe .d1-card { box-shadow: var(--tm-ring); }
html.is-iframe .d1-rise { animation: none; }
html.is-iframe .woot-widget-holder, html.is-iframe .woot--bubble-holder, html.is-iframe .woot-widget-bubble { display: none !important; }
html.is-iframe body { overflow-x: hidden; }

/* ---------- Add-on questionnaires (RIASEC, Drivemap, Motivation) ---------- */
.sx-intro { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding-top: 36px; }
.sx-intro .d1-lead { max-width: 560px; }
.sx-intro .d1-btn, .sx-next .d1-btn, .sx-tags .d1-btn { gap: 10px; }
.sx-intro i-feather, .sx-next i-feather, .sx-tags i-feather { width: 17px; height: 17px; }
.sx-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sx-bar__progress { flex: 1; }
.sx-back { flex: none; gap: 6px; }
.sx-back i-feather { width: 15px; height: 15px; }
.sx-q ~ .sx-q { display: none; }
.sx-q { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: clamp(24px, 5vw, 40px) clamp(16px, 4vw, 36px); }
.sx-q__text { font-size: clamp(19px, 2.4vw, 23px); line-height: 1.35; font-weight: 600; letter-spacing: -.025em; color: var(--tm-text); margin: 0; max-width: 560px; }
.sx-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 12px; width: 100%; margin-top: 18px; }
.sx-or { align-self: center; color: var(--tm-faint); font-weight: 700; }
.sx-scale { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; margin-top: 18px; }
.sx-scale .sx-option { flex: 1 1 140px; }
.sx-option {
  min-height: 64px;
  padding: 14px 18px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--tm-ring-strong), 0 8px 22px -16px rgba(13, 30, 83, .35);
  color: var(--tm-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: transform .2s var(--tm-ease), box-shadow .2s var(--tm-ease), background .2s, opacity .2s;
}
.sx-option:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(13, 30, 83, .3) inset, var(--tm-shadow); }
.sx-option:focus { outline: none; box-shadow: var(--tm-focus), var(--tm-ring-strong); }
.sx-option.is-active { background: var(--tm-ink); color: #fff; box-shadow: 0 14px 30px -14px rgba(13, 30, 83, .8); }
.sx-option.is-dimmed { opacity: .45; }
.sx-option--both { min-height: 44px; margin-top: 10px; padding: 0 22px; border-radius: 999px; font-size: 14px; background: var(--tm-bg-3); }
.sx-next { display: flex; justify-content: center; margin-top: 26px; }
.sx-tags { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.sx-tags__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sx-tag { padding: 8px 16px; border: 0; border-radius: 999px; background: var(--tm-bg-2); box-shadow: var(--tm-ring); color: var(--tm-text); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.sx-tag:hover { box-shadow: var(--tm-ring-strong); background: #fff; }
.sx-tag.is-active { background: var(--tm-ink); color: #fff; box-shadow: 0 8px 18px -10px rgba(13, 30, 83, .7); }
.sx-tags__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
html.is-iframe .sx-q { padding: 20px 12px; }
@media (max-width: 560px) {
  .sx-pair { grid-template-columns: 1fr; }
  .sx-or { display: none; }
  .sx-bar { flex-wrap: wrap; }
  .sx-back { order: 2; }
}

/* ---------- Standalone state pages (mail confirmation, disabled link) ---------- */
.st-page { display: flex; align-items: center; min-height: 100vh; }
.st-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding-top: 40px; }
.st-badge { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; font-size: 30px; margin-bottom: 6px; }
.st-badge--ok { background: var(--tm-green); color: #fff; box-shadow: 0 0 0 8px rgba(16, 185, 129, .12), 0 16px 32px -14px rgba(16, 185, 129, .8); }
.st-badge--off { border-radius: 18px; background: rgba(229, 0, 126, .08); color: var(--tm-pink); }
.btn-success { background: var(--tm-green); border-color: var(--tm-green); color: #fff; box-shadow: 0 10px 24px -14px rgba(16, 185, 129, .8); }
.btn-success:hover { background: #0ea371; border-color: #0ea371; transform: translateY(-1px); }
.btn-secondary { background: #fff; color: var(--tm-text); border-color: transparent; box-shadow: var(--tm-ring-strong); }