.knowledge-test-option.is-wrong {
  border-color: #b43f2e;
  background: #fdf1ef;
}

.knowledge-test-option.is-wrong::before {
  content: "\2715";
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: #b43f2e;
  background: #b43f2e;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
}

/* A slim colour-coded accent bar on the left stands in for the old plain
   text — same "quiet signal, not a shout" approach as everywhere else in
   the redesign; the colour itself carries the verdict. */
.knowledge-test-feedback {
  position: relative;
  min-height: 22px;
  margin: 14px 0 0;
  padding: 2px 0 2px 16px;
  font-weight: 700;
  color: #2c4d6f;
}

.knowledge-test-feedback:not(:empty)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 3px;
  border-radius: 999px;
  background: rgba(44, 77, 111, 0.35);
}

.knowledge-test-feedback.is-correct {
  color: #1f6a43;
}

.knowledge-test-feedback.is-correct::before {
  background: #2b7a4b;
}

.knowledge-test-feedback.is-wrong {
  color: #9a3b2c;
}

.knowledge-test-feedback.is-wrong::before {
  background: #b43f2e;
}

.knowledge-test-feedback.is-final {
  color: #133d67;
}

.knowledge-test-feedback.is-final::before {
  background: #1f4f7a;
}

.knowledge-test-actions {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* Buttons follow the redesigned CTA language: solid, confident colour
   blocks (vertical gradient for depth, not diagonal "sheen"), a quiet lift
   on hover, and an outlined — not flat-grey — secondary action. */
.knowledge-test-next-btn {
  background: linear-gradient(180deg, #2a5d8a, #163450);
  color: #ffffff;
  border-radius: 999px;
  font-weight: 700;
  padding: 11px 26px;
  box-shadow: 0 12px 28px rgba(22, 52, 80, 0.22);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.knowledge-test-next-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(22, 52, 80, 0.28);
}

.knowledge-test-next-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.knowledge-test-restart-btn {
  background: transparent;
  border: 1px solid rgba(31, 79, 122, 0.35);
  color: #1f4f7a;
  border-radius: 999px;
  font-weight: 700;
  padding: 10px 20px;
  transition: background 160ms ease, border-color 160ms ease;
}

.knowledge-test-restart-btn:hover {
  background: rgba(31, 79, 122, 0.07);
  border-color: rgba(31, 79, 122, 0.5);
}

.knowledge-test-result-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  border-radius: 999px;
  background: linear-gradient(180deg, #2a5d8a, #163450);
  color: #ffffff;
  padding: 13px 20px;
  font-weight: 700;
  box-shadow: 0 14px 32px rgba(22, 52, 80, 0.24);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.knowledge-test-result-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgba(22, 52, 80, 0.3);
}

.upgrade-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 19, 34, 0.6);
  z-index: 1050;
  padding: 18px;
}

.upgrade-modal.is-open {
  display: flex;
}

.upgrade-modal-card {
  width: min(1240px, 100%);
  max-height: min(92vh, 900px);
  overflow: auto;
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 28px 64px rgba(8, 18, 34, 0.22);
  padding: 0 28px 34px;
  position: relative;
  will-change: scroll-position;
  transform: translateZ(0);
  scrollbar-width: thin;
  scrollbar-color: rgba(108, 99, 255, 0.45) transparent;
}

.upgrade-modal-card::-webkit-scrollbar {
  width: 5px;
}

.upgrade-modal-card::-webkit-scrollbar-track {
  background: transparent;
}

.upgrade-modal-card::-webkit-scrollbar-thumb {
  background: rgba(108, 99, 255, 0.45);
  border-radius: 999px;
}

.upgrade-modal-card::-webkit-scrollbar-thumb:hover {
  background: rgba(108, 99, 255, 0.7);
}

[data-theme="dark"] .upgrade-modal-card {
  scrollbar-color: rgba(108, 138, 255, 0.4) transparent;
}

[data-theme="dark"] .upgrade-modal-card::-webkit-scrollbar-thumb {
  background: rgba(108, 138, 255, 0.4);
}

[data-theme="dark"] .upgrade-modal-card::-webkit-scrollbar-thumb:hover {
  background: rgba(108, 138, 255, 0.65);
}

.upgrade-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.upgrade-modal-close:hover {
  background: rgba(255, 255, 255, 0.26);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.65);
  transform: rotate(90deg);
}

.admin-subscriptions-edit-btn {
  position: absolute;
  top: 18px;
  right: 64px;
  height: 36px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
  z-index: 2;
  transition: background 200ms ease, border-color 200ms ease;
}

.admin-subscriptions-edit-btn:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 520px) {
  .admin-subscriptions-edit-btn {
    top: 54px;
    right: 14px;
  }

  .upgrade-discount-timer {
    top: -12px;
    right: 12px;
    padding: 6px 14px;
    font-size: 0.92rem;
  }
}

.upgrade-modal-title {
  position: relative;
  margin: 0 -28px 28px;
  padding: 42px 28px 32px;
  border-radius: 22px 22px 0 0;
  font-size: clamp(2rem, 4vw, 2.35rem);
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #ffffff;
  text-align: center;
  background:
    radial-gradient(460px 220px at 88% -45%, rgba(255, 255, 255, 0.22), transparent 62%),
    linear-gradient(125deg, #2d35e7 0%, #6c63ff 50%, #9c6bff 100%);
  text-shadow: 0 10px 26px rgba(20, 20, 70, 0.22);
}

.upgrade-modal-title::before {
  content: "\2728 Unlock full access";
  display: block;
  margin: 0 0 12px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: none;
}

.upgrade-modal-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}

.upgrade-plan-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.upgrade-plan-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* Light theme — now built on the same redesigned language as dark: matte,
   confident panels with the brand colour concentrated into two precise
   accents (a glowing hairline along the top inner edge + a single soft
   pool of colour in one corner) instead of radial glows smeared all over. */
.upgrade-plan-card {
  position: relative;
  overflow: hidden;
  background-color: #f3f6fb;
  background-image: none !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 55%, #f1f4f9 100%);
  border: 1px solid #e3e9f2;
  border-radius: 26px;
  padding: 20px 20px 18px;
  box-shadow: 0 16px 38px rgba(20, 38, 66, 0.08);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.upgrade-plan-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(560px 280px at 6% -10%, rgba(45, 53, 231, 0.10), transparent 64%);
  pointer-events: none;
  opacity: 1;
}

.upgrade-plan-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 16%;
  right: 16%;
  height: 2px;
  background: linear-gradient(90deg, rgba(45, 53, 231, 0) 0%, rgba(61, 72, 230, 0.55) 50%, rgba(45, 53, 231, 0) 100%);
  pointer-events: none;
}

.upgrade-plan-card:hover {
  transform: translateY(-2px);
  border-color: rgba(45, 53, 231, 0.30);
  box-shadow: 0 22px 50px rgba(20, 38, 66, 0.12);
}

.upgrade-plan-card > * {
  position: relative;
  z-index: 1;
}

.upgrade-plan-card--express {
  border-color: rgba(255, 122, 24, 0.30);
  box-shadow: 0 16px 38px rgba(20, 38, 66, 0.08);
}

.upgrade-plan-card--express::before {
  background: radial-gradient(560px 280px at 6% -10%, rgba(255, 122, 24, 0.12), transparent 64%);
}

.upgrade-plan-card--express::after {
  background: linear-gradient(90deg, rgba(255, 122, 24, 0) 0%, rgba(255, 138, 52, 0.6) 50%, rgba(255, 122, 24, 0) 100%);
}

.upgrade-plan-card--express:hover {
  border-color: rgba(255, 122, 24, 0.45);
  box-shadow: 0 22px 50px rgba(20, 38, 66, 0.12);
}

.upgrade-plan-head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid transparent;
  padding-bottom: 20px;
  margin-bottom: 16px;
  position: relative;
}

/* The full-width divider glow is gone; a short, solid accent bar centred
   under the plan name reads as "etched" rather than "lit" — same language
   as the dark theme's redesigned heading underline. */
.upgrade-plan-head::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 46px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2d35e7, #6c63ff);
  transform: translateX(-50%);
  transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* "Express" carries a noticeably longer bar — sized to visually span the
   whole wider "<level> ★ Express" heading group, so it reads as centred
   under the full title rather than just the level code (it's still
   centred the same way, via left:50% + translateX(-50%)). */
.upgrade-plan-card--express .upgrade-plan-head::after {
  width: 120px;
  background: linear-gradient(90deg, #ff7a18, #d43c08);
}

/* Hovering the card makes its underline stretch a touch — a small
   "reaching out" animation that rewards attention without shouting. */
.upgrade-plan-card:hover .upgrade-plan-head::after {
  width: 72px;
}

.upgrade-plan-card--express:hover .upgrade-plan-head::after {
  width: 156px;
}

.upgrade-plan-head h4 {
  margin: 0;
  color: #112f55;
  font-size: 2.1rem;
  line-height: 1.06;
  letter-spacing: 0.3px;
  text-align: center;
  text-shadow: 0 10px 18px rgba(17, 47, 85, 0.10);
}

.upgrade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #2d35e7, #03238f);
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  padding: 10px 20px;
  white-space: nowrap;
}

/* "Express" reads as a hairline stamp of distinction now — outlined, with
   a small star mark — instead of a filled sticker; mirrors the dark
   theme's "wax-seal" badge redesign. */
.upgrade-badge--express {
  background: rgba(255, 122, 24, 0.08);
  border: 1px solid rgba(255, 122, 24, 0.45);
  color: #c8460a;
  font-weight: 800;
  font-size: 0.84rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 8px 16px;
  box-shadow: none;
}

.upgrade-badge--express::before {
  content: "\2605";
  margin-right: 6px;
  font-size: 0.78em;
  vertical-align: 1px;
}

.upgrade-plan-subtitle {
  margin: 0 0 12px;
  color: #1d3d61;
  font-size: 1.05rem;
  font-weight: 700;
}

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

.upgrade-feature-list li {
  position: relative;
  padding-left: 34px;
  color: #1e3f65;
  font-size: 1rem;
  line-height: 1.35;
}

/* Filled glowing bubbles → slim outlined rings, same quieter, editorial
   icon language as the dark theme redesign — the copy leads, not the icon. */
.upgrade-feature-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: -1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(45, 53, 231, 0.35);
  color: #2d35e7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: none;
}

.upgrade-plan-card--express .upgrade-feature-list li::before {
  background: transparent;
  border-color: rgba(255, 122, 24, 0.45);
  color: #d4540a;
  box-shadow: none;
}

/* Long diagonal gradients → solid, confident colour blocks (vertical
   gradient for depth, not direction) — the same calmer CTA language as the
   dark theme redesign; the lift-on-hover carries "premium", not the glow. */
.upgrade-plan-price-btn {
  margin-top: 16px;
  width: 100%;
  border-radius: 999px;
  padding: 14px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 1.05rem;
  background: linear-gradient(180deg, #3a45d6, #1f2768);
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(28, 38, 110, 0.26);
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.upgrade-plan-card--express .upgrade-plan-price-btn {
  background: linear-gradient(180deg, #ff8a3d, #c8460a);
  box-shadow: 0 16px 34px rgba(180, 76, 12, 0.26);
}

.upgrade-plan-price-btn:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 22px 44px rgba(21, 47, 86, 0.30);
}

.upgrade-plan-price-btn.has-timer {
  position: relative;
}

.upgrade-discount-timer {
  position: absolute;
  top: -14px;
  right: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff7a18, #d43c08);
  color: #ffffff;
  font-weight: 900;
  font-size: 0.96rem;
  letter-spacing: 0.2px;
  box-shadow: 0 14px 26px rgba(212, 60, 8, 0.24);
}

.upgrade-price-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.upgrade-old-price {
  color: rgba(255, 206, 206, 0.9);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: #ff5a5a;
}

.upgrade-off-badge {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1rem;
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.upgrade-new-price {
  color: #ffffff;
  font-weight: 700;
}

.enroll-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 19, 34, 0.56);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1060;
  padding: 18px;
}

.enroll-modal.is-open {
  display: flex;
}

.enroll-modal-card {
  width: min(520px, 100%);
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 24px 50px rgba(8, 18, 34, 0.25);
  padding: 24px 20px 20px;
  position: relative;
  border: 1px solid #d6deea;
}

.enroll-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #8a94a2;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.enroll-modal-close:hover {
  background: #eef3fa;
  color: #24344a;
}

.enroll-modal-card h3 {
  margin: 0 0 8px;
  color: #123253;
  font-size: 1.8rem;
}

.enroll-success-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 19, 34, 0.56);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1065;
  padding: 18px;
}

.enroll-success-modal.is-open {
  display: flex;
}

.enroll-success-card {
  width: min(420px, 100%);
  background: #ffffff;
  border-radius: 18px;
  padding: 28px 24px 24px;
  text-align: center;
  box-shadow: 0 24px 50px rgba(8, 18, 34, 0.25);
  border: 1px solid #d6deea;
}

.enroll-success-check {
  width: 86px;
  height: 86px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #e8f7ef;
  display: flex;
  align-items: center;
  justify-content: center;
}

.enroll-success-check svg {
  width: 64px;
  height: 64px;
}

.enroll-success-check circle {
  fill: #2bb673;
}

.enroll-success-check path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.enroll-success-card h3 {
  margin: 0 0 6px;
  color: #123253;
  font-size: 1.7rem;
}

.enroll-success-text {
  margin: 0 0 18px;
  color: #3a5874;
  font-weight: 600;
}

.enroll-success-menu-btn {
  background: linear-gradient(135deg, #2fa7ff, #1682cf);
  padding: 10px 20px;
}

.enroll-plan-note {
  margin: 0 0 14px;
  color: #294c70;
  font-weight: 700;
}

.enroll-form input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #b8c5d3;
  border-radius: 10px;
  padding: 11px 12px;
  margin-bottom: 10px;
  font-size: 1rem;
  font-family: inherit;
}

.enroll-form select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #b8c5d3;
  border-radius: 10px;
  padding: 11px 12px;
  margin-bottom: 10px;
  font-size: 1rem;
  font-family: inherit;
  background: #ffffff;
  color: #1a2d42;
}

.enroll-form input:focus {
  outline: none;
  border-color: #2fa7ff;
  box-shadow: 0 0 0 3px rgba(47, 167, 255, 0.18);
}

.enroll-form select:focus {
  outline: none;
  border-color: #2fa7ff;
  box-shadow: 0 0 0 3px rgba(47, 167, 255, 0.18);
}

.enroll-select-label {
  display: block;
  margin: 0 0 6px;
  color: #2b4a6c;
  font-weight: 600;
  font-size: 0.95rem;
}

.enroll-select[hidden] {
  display: none;
}

.enroll-message {
  min-height: 20px;
  margin: 2px 0 10px;
  color: #b42318;
  font-weight: 600;
}

.enroll-message.is-success {
  color: #1f6a43;
}

.enroll-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.enroll-cancel-btn {
  background: #e8edf3;
  color: #183756;
}

.enroll-submit-btn {
  background: linear-gradient(135deg, #2fa7ff, #1682cf);
}

.results-section {
  padding: 18px 8% 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  background: #ffffff;
}

.results-title {
  margin: 0;
  width: 100%;
  --results-title-image: none;
  border: 2px solid rgba(240, 180, 41, 0.38);
  border-radius: 18px;
  padding: 14px 46px;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
  color: #1E2A38;
  text-align: center;
  background-image: var(--results-title-image), linear-gradient(135deg, #fffdf6 0%, #fdf1d9 100%);
  background-size: cover, auto;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  box-shadow: 0 10px 30px rgba(240, 180, 41, 0.16), 0 4px 14px rgba(30, 42, 56, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  box-sizing: border-box;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease, background 0.35s ease;
}

.results-title:hover {
  border-color: rgba(240, 180, 41, 0.6);
  box-shadow: 0 14px 38px rgba(240, 180, 41, 0.22), 0 6px 16px rgba(30, 42, 56, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transform: translateY(-2px);
}

.results-layout {
  width: 100%;
  max-width: 1320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.result-card {
  border: 2px solid #1f2c39;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background: #ffffff;
  overflow: hidden;
  position: relative;
}

.result-card:not(.result-card--text) {
  display: block;
}

.result-card__label {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  padding: 6px 10px;
  border: 2px solid #1f2c39;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  color: #1f2c39;
  box-shadow: 0 6px 12px rgba(18, 39, 63, 0.12);
  pointer-events: none;
}

.result-card--text {
  --result-card-image: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #ffffff;
}

.result-card--text::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--result-card-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(7px);
  transform: scale(1.04);
  opacity: 0.9;
  z-index: 0;
}

.result-card--text::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.22);
  z-index: 0;
}

.result-card--text .result-card__label {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  font-size: 1.75rem;
  line-height: 1.2;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85), 0 8px 18px rgba(0, 0, 0, 0.12);
}

.result-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.results-center {
  border: 2px solid #1f2c39;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 24px;
  font-size: 1.12rem;
  background: rgba(255, 255, 255, 0.75);
  min-height: 0;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  box-sizing: border-box;
}

.results-center p {
  margin: 0 0 10px;
}

.results-text {
  max-width: 980px;
  width: 100%;
}

.results-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  margin: 10px 0 10px;
}

.results-col {
  text-align: left;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #c9d4e0;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 6px 14px rgba(18, 39, 63, 0.06);
}

.results-text h3 {
  margin: 0 0 10px;
  font-size: 1.35rem;
  font-weight: 800;
  color: #10263f;
}

.results-text ul {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.results-text li {
  margin: 6px 0;
  font-size: 1.08rem;
  color: #203b56;
}

.results-text p {
  line-height: 1.6;
  color: #1b334d;
}

.results-text > p:first-child,
.results-text > p:last-child {
  text-align: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 700;
}

.results-text > p:last-child {
  margin-top: 2px;
}

.results-mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(320px, 1fr));
  grid-template-rows: repeat(4, 280px);
  gap: 16px;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.results-mosaic .result-card:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / 3;
}

.results-mosaic .result-card:nth-child(2) {
  grid-column: 2;
  grid-row: 2 / 4;
}

.results-mosaic .result-card:nth-child(3) {
  grid-column: 3;
  grid-row: 1 / 3;
}

.results-mosaic .result-card:nth-child(4) {
  grid-column: 1;
  grid-row: 3 / 5;
}

.results-mosaic .result-card:nth-child(5) {
  grid-column: 3;
  grid-row: 3 / 5;
}

.results-home-grid {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.results-section .results-modal-tiles--home {
  margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.results-section .results-modal-tiles--home .results-modal-tile {
  padding: 14px;
}

.results-section .results-modal-tiles--home .results-modal-certificate {
  max-width: none;
  height: 320px;
  margin: 0;
  border-radius: 18px;
}

.results-section .results-modal-tiles--home .results-modal-name {
  font-size: 1.15rem;
}

.results-section .results-modal-tiles--home .results-modal-quote {
  font-size: 1rem;
}

/* Blur image on first certificate for mobile */
.results-section .results-modal-tiles--home .results-modal-tile:nth-child(1) .results-modal-certificate img {
  filter: blur(35px);
}

/* Desktop-only: show certificates as a clean gallery (no borders/name/slogan) */
@media (min-width: 768px) {
  .results-section .results-home-grid {
    padding-bottom: 80px;
  }

  .results-section .results-modal-tiles--home {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    grid-auto-rows: auto;
    align-items: start;
  }

  .results-section .results-modal-tiles--home .results-modal-tile {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    grid-row-end: auto;
  }

  .results-section .results-modal-tiles--home .results-modal-tile:hover {
    transform: none;
    box-shadow: none;
  }

  .results-section .results-modal-tiles--home .results-modal-person {
    display: none;
  }

  .results-section .results-modal-tiles--home .results-modal-certificate {
    height: 100%;
    border: 2px solid #0b1620;
    border-radius: 14px;
    background: linear-gradient(160deg, #ffffff 0%, #e3eaf3 100%);
    box-shadow:
      0 18px 40px rgba(8, 20, 35, 0.35),
      0 6px 16px rgba(8, 20, 35, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.65);
    overflow: hidden;
    position: relative;
    transform: translateZ(0);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
  }

  .results-section .results-modal-tiles--home .results-modal-tile:hover .results-modal-certificate {
    transform: translateY(-6px) scale(1.012);
    box-shadow:
      0 28px 58px rgba(8, 20, 35, 0.45),
      0 12px 26px rgba(8, 20, 35, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.75);
  }

  .results-section .results-modal-tiles--home .results-modal-tile:nth-child(1) .results-modal-certificate::after,
  .results-section .results-modal-tiles--home .results-modal-tile:nth-child(3) .results-modal-certificate::after {
    content: attr(data-overlay);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 34px;
    text-align: center;
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.2;
    color: rgba(11, 22, 32, 0.92);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.4) 100%);
    backdrop-filter: blur(3px);
    text-shadow: 0 2px 12px rgba(255, 255, 255, 0.65);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -16px 30px -12px rgba(8, 20, 35, 0.18);
  }

  .results-section .results-modal-tiles--home .results-modal-certificate img {
    object-fit: contain;
  }

  /* Mosaic layout (5 tiles on homepage) */
  .results-section .results-modal-tiles--home .results-modal-certificate {
    height: 520px;
  }

  /* Top row: blurred side certificates */
  .results-section .results-modal-tiles--home .results-modal-tile:nth-child(1) {
    grid-column: 1;
    grid-row-start: 1;
  }

  .results-section .results-modal-tiles--home .results-modal-tile:nth-child(3) {
    grid-column: 3;
    grid-row-start: 1;
  }

  .results-section .results-modal-tiles--home .results-modal-tile:nth-child(1) img,
  .results-section .results-modal-tiles--home .results-modal-tile:nth-child(3) img {
    filter: blur(9px);
    opacity: 0.55;
    transform: scale(1.04);
  }

  /* Middle row */
  .results-section .results-modal-tiles--home .results-modal-tile:nth-child(2) {
    grid-column: 2;
    grid-row-start: 2;
    margin-top: -269px;
  }

  /* Bottom row */
  .results-section .results-modal-tiles--home .results-modal-tile:nth-child(4) {
    grid-column: 1;
    grid-row-start: 2;
    margin-top: 0;
  }

  .results-section .results-modal-tiles--home .results-modal-tile:nth-child(5) {
    grid-column: 3;
    grid-row-start: 2;
    margin-top: 0;
  }
}

.results-learn-btn {
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff7a18, #d43c08);
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 600;
  padding: 14px 110px;
  box-shadow: 0 16px 34px rgba(212, 60, 8, 0.18);
  transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.results-learn-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 20px 44px rgba(212, 60, 8, 0.24);
}

/* Results loading overlay */
.results-loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 16, 34, 0.78);
  backdrop-filter: blur(6px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: lessons-overlay-in 0.18s ease;
}
.results-loading-overlay.is-active {
  display: flex;
}

/* The loading overlay's backdrop is semi-transparent + blurred (by design,
   so the page doesn't feel like a dead end while loading) - which means
   the bundled placeholder certificates baked into this page's own HTML
   were visible (blurred) through it, then visibly got swapped for the
   admin's real ones once certificates-viewer.js finished fetching -
   looking like the certificates "disappeared and reloaded". Hidden until
   that swap has already happened (certificates-viewer.js removes this
   class once the real content, whichever source it came from, is in
   place) so there's nothing behind the blur to visibly change. */
.results-standalone.is-loading-certs .results-modal-tiles,
.results-standalone.is-loading-certs .results-mobile-masonry {
  visibility: hidden;
}

/* Same soft drifting glow blobs as the lesson-catalog loading screen, for a
   consistent "pretty loading" identity across the site. */
.results-loading-overlay::before,
.results-loading-overlay::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.28;
  pointer-events: none;
  animation: lessons-blob-drift 9s ease-in-out infinite;
}
.results-loading-overlay::before {
  width: 260px;
  height: 260px;
  background: #1278d0;
  top: 14%;
  left: 8%;
}
.results-loading-overlay::after {
  width: 220px;
  height: 220px;
  background: #f2c14e;
  bottom: 12%;
  right: 10%;
  animation-delay: -4.5s;
  animation-direction: reverse;
}

.results-loading-card {
  position: relative;
  background: #ffffff;
  border-radius: 22px;
  border: 2px solid rgba(242, 180, 69, 0.22);
  padding: 40px 44px 34px;
  text-align: center;
  min-width: 280px;
  max-width: 360px;
  width: 90%;
  box-shadow: 0 24px 64px rgba(12, 32, 54, 0.32);
  animation:
    lessons-card-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    lessons-card-glow 2.6s ease-in-out 0.32s infinite;
}
[data-theme="dark"] .results-loading-card {
  background: linear-gradient(160deg, #101f3a 0%, #0d1e38 100%);
  border-color: rgba(240, 180, 41, 0.28);
  animation:
    lessons-card-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    lessons-card-glow-dark 2.6s ease-in-out 0.32s infinite;
}

.results-loading-spinner {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
}
.results-loading-spinner-ring {
  position: absolute;
  border-radius: 50%;
}
.results-loading-spinner-ring--outer {
  inset: 0;
  background: conic-gradient(from 0deg, rgba(18, 120, 208, 0) 0deg, #75bdf2 200deg, #1278d0 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  animation: lessons-spin 1.1s linear infinite;
  box-shadow: 0 0 18px rgba(18, 120, 208, 0.25);
}
.results-loading-spinner-ring--inner {
  inset: 12px;
  background: conic-gradient(from 180deg, rgba(242, 193, 78, 0) 0deg, #f7d98a 160deg, #f2c14e 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  animation: lessons-spin-reverse 0.85s linear infinite;
}
.results-loading-spinner-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  animation: lessons-icon-float 1.8s ease-in-out infinite;
}

.results-loading-text {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f2a45;
  margin: 0 0 20px;
  letter-spacing: 0.01em;
}
[data-theme="dark"] .results-loading-text {
  color: #f0b429;
}

.results-loading-bar-wrap {
  background: #e8eef6;
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}
[data-theme="dark"] .results-loading-bar-wrap {
  background: rgba(240, 180, 41, 0.14);
}
.results-loading-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1278d0, #f2c14e);
  border-radius: 999px;
  transition: width 0.1s linear;
}
.results-loading-percent {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1278d0;
  margin: 0;
}
[data-theme="dark"] .results-loading-percent {
  color: #f2c14e;
}

/* A lighter-weight second line under .results-loading-text, for overlays
   (like the logout one) that don't have a percent/progress-bar readout to
   show and would otherwise feel too empty with just the spinner + title. */
.results-loading-subtext {
  font-size: 0.9rem;
  font-weight: 500;
  color: #5c7488;
  margin: -12px 0 0;
}
[data-theme="dark"] .results-loading-subtext {
  color: #9bb8d8;
}

.mentors-more-btn {
  margin-top: 8px;
  border: 2px solid #1f2c39;
  border-radius: 999px;
  background: linear-gradient(135deg, #1f6f64, #14473f);
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 600;
  padding: 12px 30px;
  box-shadow: 0 14px 30px rgba(20, 71, 63, 0.28);
  transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.mentors-more-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(20, 71, 63, 0.34);
}

.about-title {
  margin-top: 8px;
}

.about-team {
  width: 100%;
  max-width: 1320px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about-person {
  border: 2px solid #1f2c39;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.94) 0%, rgba(236, 243, 250, 0.86) 100%);
  box-shadow: 0 12px 28px rgba(16, 37, 58, 0.12), 0 3px 8px rgba(16, 37, 58, 0.08);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 130px;
  min-width: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Without this, a flex child's default min-width:auto lets its text's
   intrinsic content width force the whole card (and its grid track)
   wider than the viewport on mobile — the "swaying" horizontal-scroll
   bug where the university/QS-ranking line pushed the card off-screen. */
.about-person > .about-info {
  min-width: 0;
}

.about-person:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(16, 37, 58, 0.18), 0 6px 14px rgba(16, 37, 58, 0.1);
}

.about-person-featured {
  max-width: 1400px;
  width: 100%;
  align-self: center;
  min-height: 210px;
  border-radius: 999px;
  border: 2px solid #263747;
  background: transparent;
  padding: 0 26px 0 0;
  gap: 22px;
  overflow: hidden;
}

.about-avatar {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 2px solid #1f2c39;
  background: linear-gradient(135deg, #e7edf3, #cfd8e2);
  box-shadow: 0 6px 16px rgba(16, 37, 58, 0.2), inset 0 2px 5px rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #40566b;
  font-weight: 700;
  overflow: hidden;
}

.about-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* University flag reveal: fully contained within the avatar circle, so it
   can never overlap a neighboring card the way a floating popover did —
   cards sit only ~20px apart, nowhere near enough room for anything to
   float above one without colliding with the card before it. On hover the
   avatar flips in 3D to show the flag on its back face, while a thin gold
   ring draws itself around the circle at the same time. */
.about-avatar.has-uni-flag {
  overflow: visible;
  perspective: 900px;
}

.uni-flag-ring {
  position: absolute;
  inset: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  overflow: visible;
  pointer-events: none;
  transform: rotate(90deg);
  z-index: 3;
}

.uni-flag-ring-circle {
  fill: none;
  stroke: url(#uni-flag-ring-gradient);
  stroke-width: 2.2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.7));
  /* Reveals by drawing — rotated 90deg above so the stroke starts at the
     bottom of the circle and sweeps upward around both sides at once. */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.22, 0.9, 0.32, 1);
}

.about-person:hover .uni-flag-ring-circle,
.about-person:focus-within .uni-flag-ring-circle {
  stroke-dashoffset: 0;
}

/* Clipping and 3D rotation are deliberately split across two elements —
   overflow:hidden and transform-style:preserve-3d fight each other when
   set on the same element (browsers tend to flatten the 3D transform, so
   the "flip" silently renders as a no-op). The mask clips to a circle and
   never transforms; the flip inside it rotates and is never clipped. */
.about-avatar-mask {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
}

.about-avatar-flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.about-person:hover .about-avatar-flip,
.about-person:focus-within .about-avatar-flip {
  transform: rotateY(180deg);
}

.about-avatar-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-avatar-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-avatar-back {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, #ffffff 0%, #f1f4f9 100%);
  padding: 6%;
  box-sizing: border-box;
}

.uni-flag-back-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Most crests/logos put their title banner near the top and the emblem
     below — biasing the crop toward the top keeps that title visible
     instead of object-fit's default center crop splitting the difference
     and cutting into it on a taller-than-wide image. */
  object-position: center 12%;
  display: block;
  border-radius: 4px;
}

[data-theme="dark"] .about-avatar-back {
  background: linear-gradient(160deg, #1c2c48 0%, #0f1c33 100%);
}

@media (prefers-reduced-motion: reduce) {
  .about-avatar-flip {
    transition: none;
  }
  .uni-flag-ring-circle {
    transition: none;
  }
}

/* Bio ⇄ credential-line swap, synced with the avatar flip above. Both
   pieces of text share the same grid cell so the swap never shifts
   layout: the bio fades out on hover while the "Student of..." line
   wipes in from the left via clip-path. Members without a university on
   file never get the .about-student-line markup at all (see
   buildStudentLine in team-modal.js), so they are unaffected. */
.about-info-text {
  display: grid;
}

.about-info-text .about-bio,
.about-info-text .about-student-line {
  grid-area: 1 / 1;
  min-width: 0;
}

.about-info-text .about-bio {
  opacity: 1;
  transition: opacity 0.35s ease;
}

/* Selectors below are deliberately chained through both .about-info and
   .about-info-text (rather than the bare .about-student-line class) so
   this always outranks the later, more specific .about-person-featured
   .about-info p / .about-grid .about-info p rules — otherwise those
   would silently win the color/font-style cascade on featured cards. */
.about-info .about-info-text .about-student-line {
  margin: 0;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity 0.45s ease 0.05s,
    clip-path 0.6s cubic-bezier(0.22, 0.9, 0.32, 1);
  /* Playfair Display gives an elegant, academic feel without leaning on
     italics — a slanted serif at this small a size (compounding the
     slant with fine serif strokes) reads as fussy and hard to scan, so
     this stays upright and leans on weight/color/spacing instead. */
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-style: normal;
  font-weight: 600;
  color: #a9791c;
  letter-spacing: 0.015em;
  /* Each fact (university, ranking, major) gets its own line instead of
     running together as a wrapping paragraph — stacked, not sentences
     chasing each other. */
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.3;
}

.about-student-line-item {
  display: block;
}

/* Label words ("Student of", "QS", "worldwide", "Major:") stay small,
   muted and capitalized — an eyebrow tag rather than a sentence — so
   the actual facts (university, rank, major) are what the eye lands
   on, set larger and bolder in the serif face right next to them. */
.about-student-line-label {
  font-family: "Manrope", "Segoe UI", "Segoe UI Variable", sans-serif;
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #b9975c;
}

.about-student-line-value {
  font-size: 1.08em;
  font-weight: 800;
  color: #93650f;
}

[data-theme="dark"] .about-student-line-label {
  color: #a68a52;
}

[data-theme="dark"] .about-student-line-value {
  color: #eccb6c;
}

.about-person:hover .about-info-text .about-bio,
.about-person:focus-within .about-info-text .about-bio {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.about-person:hover .about-info .about-info-text .about-student-line,
.about-person:focus-within .about-info .about-info-text .about-student-line {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

[data-theme="dark"] .about-info .about-info-text .about-student-line {
  color: #d9b64a;
}

@media (prefers-reduced-motion: reduce) {
  .about-info-text .about-bio,
  .about-info .about-info-text .about-student-line {
    transition: none;
  }
}

.about-person-featured .about-avatar {
  width: 206px;
  height: 206px;
  flex: 0 0 206px;
  margin-left: -2px;
  border: 2px solid #263747;
  background: #c7d0da;
  color: #2b4e72;
  font-size: 2.1rem;
}

.about-person-featured .about-info h3 {
  margin: 0 0 10px;
  font-size: 1.95rem;
  font-weight: 800;
  color: #132943;
  word-break: keep-all;
  overflow-wrap: normal;
}

.about-person-featured .about-info {
  padding-right: 14px;
}

.about-person-featured .about-info p {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.35;
  color: #24415f;
}

.about-info h3 {
  margin: 0 0 6px;
  font-size: 1.5rem;
}

.about-info p {
  margin: 0;
  color: #31475c;
  line-height: 1.45;
  font-size: 1.02rem;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: 16px;
}

.about-grid .about-person {
  min-height: 165px;
  padding: 0 16px 0 0;
  align-items: center;
  overflow: hidden;
}

.about-grid .about-avatar {
  width: 156px;
  height: 156px;
  flex: 0 0 156px;
  margin-left: -2px;
}

.about-grid .about-info h3 {
  font-size: 1.22rem;
}

.about-grid .about-info p {
  font-size: 0.96rem;
}

.contact-section {
  padding: 14px 8% 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: #ffffff;
}

.contact-title {
  margin-top: 6px;
}

.contact-section,
.contact-section * {
  box-sizing: border-box;
}

.contact-card {
  width: 100%;
  max-width: 1240px;
  border: 2px solid #1f2c39;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0%, rgba(235, 243, 250, 0.88) 100%);
  box-shadow: 0 22px 52px rgba(16, 37, 58, 0.14), 0 6px 18px rgba(16, 37, 58, 0.08);
  padding: 24px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  box-sizing: border-box;
}

.contact-form,
.contact-info {
  background: #ffffff;
  border: 1px solid #c9d4e0;
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 8px 22px rgba(16, 37, 58, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.contact-est-block {
  background: #ffffff;
  border: 1px solid #c9d4e0;
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.contact-est-label {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #0f2a45;
}