/* ==========================================================================
   WiMentors — design system
   Brand tokens mirror the WiEnergi app (src/theme/index.js):
   orange "Wi" + forest-green on warm cream. Montserrat display, Poppins body.
   ========================================================================== */

:root {
  /* Greens (brand primary) */
  --green: #6b7f3b;
  --green-dark: #4f6128;
  --green-deep: #2b2118;
  --green-soft: #8a9e52;
  --green-mint: #eef1e2;
  --green-mint-border: #d9dfc2;

  /* Orange (brand accent — the "Wi") */
  --orange: #c2603d;
  --orange-dark: #a34d2e;
  --orange-soft: #f6e3d8;

  /* Hub accents */
  --hub-connect: #6b7f3b;
  --hub-jobs: #3f6b6b;
  --hub-jobs-2: #5e8f8c;
  --hub-enterprise: #a34d2e;
  --hub-learn: #6e4a5e;
  --hub-learn-2: #8f6a80;

  /* Neutrals */
  --cream: #f5efe6;
  --card: #fffdf9;
  --ink: #2b2118;
  --ink-soft: #5a4a3c;
  --muted: #8c7b6b;
  --line: #e6dccb;
  --white: #ffffff;

  /* States */
  --success: #2e9e5b;
  --danger: #e0533d;
  --info: #2d72c8;

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", "Segoe UI", system-ui, sans-serif;

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows */
  --sh-soft: 0 4px 10px rgba(43, 33, 24, 0.06);
  --sh-card: 0 8px 18px rgba(43, 33, 24, 0.08);
  --sh-raised: 0 14px 28px rgba(43, 33, 24, 0.16);
  --sh-glow: 0 18px 50px rgba(107, 127, 59, 0.22);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --nav-h: 66px;
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-loading {
  opacity: 0;
}
body.is-ready {
  opacity: 1;
  transition: opacity 0.5s var(--ease-out);
}
body.is-leaving {
  opacity: 0;
  transition: opacity 0.28s var(--ease-in-out);
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
}

:focus-visible {
  outline: 3px solid rgba(194, 96, 61, 0.55);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: var(--orange-soft);
  color: var(--green-deep);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

h1,
h2,
.display {
  font-family: var(--font-display);
  font-weight: 700;
}

h3,
h4 {
  font-family: var(--font-body);
  font-weight: 700;
}

h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  line-height: 1.05;
  position: relative;
  isolation: isolate;
}
h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
}
h3 {
  font-size: 1.25rem;
}
p {
  margin: 0 0 1em;
}

.container {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.section {
  padding-block: clamp(56px, 7vw, 96px);
  position: relative;
  /* Pre-reveal translateX offsets and decorative frames must never widen the page. */
  overflow-x: clip;
}
.section--tight {
  padding-block: clamp(36px, 5vw, 64px);
}
.section--cream {
  background: var(--cream);
}
.section--white {
  background: var(--white);
}
.section--mint {
  background: linear-gradient(180deg, var(--green-mint) 0%, var(--cream) 100%);
}
.section--deep {
  background: radial-gradient(1200px 600px at 10% -10%, rgba(138, 158, 82, 0.55), transparent 60%),
    radial-gradient(900px 500px at 100% 110%, rgba(194, 96, 61, 0.28), transparent 60%),
    var(--green-deep);
  color: rgba(255, 255, 255, 0.82);
}
.section--deep h2,
.section--deep h3 {
  color: var(--white);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
}
.section--deep .eyebrow {
  color: var(--orange);
}

.lead {
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  color: var(--ink-soft);
  max-width: 60ch;
}
.section--deep .lead {
  color: rgba(255, 255, 255, 0.78);
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(36px, 5vw, 60px);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head--center .eyebrow {
  justify-content: center;
}
.section-head--center .lead {
  margin-inline: auto;
}
.section-head--split {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Wordmark
   -------------------------------------------------------------------------- */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 1.55rem;
  line-height: 1;
  white-space: nowrap;
}
.wordmark .wi {
  color: var(--orange);
}
.wordmark .rest {
  color: var(--green);
}
.wordmark--light .rest {
  color: var(--white);
}
.wordmark--lg {
  font-size: 2.2rem;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--green);
  --btn-fg: var(--white);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--spring), box-shadow 0.35s var(--ease-out), background 0.3s var(--ease-out),
    color 0.3s var(--ease-out);
  white-space: nowrap;
}
.btn::after {
  /* sweeping shine */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-out);
  z-index: -1;
}
.btn:hover::after {
  transform: translateX(120%);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(107, 127, 59, 0.28);
}
.btn:active {
  transform: translateY(0) scale(0.98);
}
.btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s var(--ease-out);
}
.btn:hover svg.arrow {
  transform: translateX(4px);
}
.btn--orange {
  --btn-bg: var(--orange);
  --btn-fg: var(--green-deep);
}
.btn--orange:hover {
  box-shadow: 0 12px 26px rgba(194, 96, 61, 0.38);
}
.btn--white {
  --btn-bg: var(--white);
  --btn-fg: var(--green);
}
.btn--white:hover {
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--green);
  box-shadow: inset 0 0 0 2px var(--green-mint-border);
}
.btn--ghost:hover {
  background: var(--green-mint);
  box-shadow: inset 0 0 0 2px var(--green-mint-border), 0 8px 20px rgba(107, 127, 59, 0.1);
}
/* Destructive, and it should look it — but only once you are near it, so a row
   of buttons does not read as a row of warnings. */
.btn--danger { --btn-fg: #c2402c; box-shadow: inset 0 0 0 2px #f2cfc7; }
.btn--danger:hover { background: #ffeae5; box-shadow: inset 0 0 0 2px #e8b3a8; }
.btn--danger:disabled { opacity: 0.6; cursor: default; }
.btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}
.btn--sm {
  padding: 11px 18px;
  font-size: 0.88rem;
}
.btn--lg {
  padding: 18px 32px;
  font-size: 1.05rem;
}
.btn--block {
  width: 100%;
}
.btn[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--green);
  transition: gap 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.link-arrow:hover {
  gap: 14px;
  color: var(--green-soft);
}
.link-arrow svg {
  width: 18px;
  height: 18px;
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: height 0.4s var(--ease-out), background 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out),
    backdrop-filter 0.4s var(--ease-out);
}
.nav.is-scrolled {
  height: 64px;
  background: rgba(247, 246, 241, 0.82);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 1px 0 rgba(43, 33, 24, 0.06), 0 10px 30px rgba(43, 33, 24, 0.05);
}
.nav--dark:not(.is-scrolled) {
  color: var(--white);
}
.nav--dark:not(.is-scrolled) .wordmark .rest {
  color: var(--white);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  position: relative;
  display: inline-block;
  padding: 10px 14px;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink-soft);
  border-radius: var(--r-pill);
  transition: color 0.3s, background 0.3s;
}
.nav--dark:not(.is-scrolled) .nav__links a {
  color: rgba(255, 255, 255, 0.82);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.nav__links a:hover::after,
.nav__links a.is-active::after {
  transform: scaleX(1);
}
.nav__links a:hover {
  color: var(--ink);
}
.nav--dark:not(.is-scrolled) .nav__links a:hover {
  color: var(--white);
}
.nav__cta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 130;
}
.nav__burger span {
  position: absolute;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.4s var(--ease-out), opacity 0.3s, width 0.3s;
}
.nav__burger span:nth-child(1) {
  transform: translateY(-7px);
}
.nav__burger span:nth-child(3) {
  transform: translateY(7px);
}
.nav__burger.is-open {
  color: var(--ink);
}
.nav__burger.is-open span:nth-child(1) {
  transform: rotate(45deg);
}
.nav__burger.is-open span:nth-child(2) {
  opacity: 0;
  width: 0;
}
.nav__burger.is-open span:nth-child(3) {
  transform: rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px var(--gutter) 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), visibility 0s 0.4s;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), visibility 0s;
}
.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-menu li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.mobile-menu.is-open li {
  opacity: 1;
  transform: none;
}
.mobile-menu li:nth-child(1) { transition-delay: 0.08s; }
.mobile-menu li:nth-child(2) { transition-delay: 0.14s; }
.mobile-menu li:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu li:nth-child(4) { transition-delay: 0.26s; }
.mobile-menu li:nth-child(5) { transition-delay: 0.32s; }
.mobile-menu a.menu-link {
  display: block;
  padding: 14px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.mobile-menu .btn-row {
  margin-top: 30px;
}

@media (max-width: 900px) {
  .nav__links,
  .nav__cta .btn--ghost,
  .nav__cta .btn--ghost-light {
    display: none;
  }
  .nav__burger {
    display: inline-flex;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(10px, 2vw, 24px));
  padding-bottom: clamp(20px, 3vw, 40px);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  animation: drift 18s ease-in-out infinite alternate;
  will-change: transform;
}
.blob--green {
  width: 560px;
  height: 560px;
  background: radial-gradient(circle at 30% 30%, #d9dfc2, transparent 65%);
  top: -160px;
  left: -160px;
}
.blob--orange {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle at 60% 40%, #f6e3d8, transparent 65%);
  top: 20%;
  right: -140px;
  animation-delay: -6s;
  animation-duration: 22s;
}
.blob--mint {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle at 50% 50%, #eef1e2, transparent 70%);
  bottom: -160px;
  left: 30%;
  animation-delay: -11s;
}
@keyframes drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(40px, -30px, 0) scale(1.08);
  }
  100% {
    transform: translate3d(-30px, 40px, 0) scale(0.96);
  }
}
.hero__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(107, 127, 59, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 127, 59, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero__copy .lead {
  margin-top: 16px;
  margin-bottom: 24px;
  max-width: 50ch;
}
.hero .eyebrow {
  margin-bottom: 12px;
}
.hero .btn--lg {
  padding: 15px 26px;
  font-size: 0.98rem;
}
.hero h1 .accent {
  position: relative;
  display: inline-block;
  color: var(--green);
}
.hero h1 .accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 0.28em;
  background: var(--orange-soft);
  border-radius: 6px;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  animation: underline 0.9s var(--ease-out) 0.9s forwards;
}
@keyframes underline {
  to {
    transform: scaleX(1);
  }
}
.hero__proof {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.avatar-stack {
  display: flex;
}
.avatar-stack img,
.avatar-stack span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid var(--cream);
  object-fit: cover;
  margin-left: -12px;
  background: var(--green-mint);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--green);
}
.avatar-stack img:first-child,
.avatar-stack span:first-child {
  margin-left: 0;
}
.hero__proof-text {
  font-size: 0.92rem;
  color: var(--muted);
}
.hero__proof-text strong {
  color: var(--ink);
  font-weight: 600;
}

.hero__visual {
  position: relative;
  width: 100%;
  /* Tied to viewport height so the hero fits on short screens */
  max-width: min(400px, 52vh);
  margin-inline: auto;
  align-self: center;
}
.hero__photo {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--sh-raised);
  background: linear-gradient(160deg, var(--green-soft), var(--green-deep));
  transform: rotate(-1.5deg);
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1.4s var(--ease-out);
}
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(43, 33, 24, 0.55) 100%);
}
.hero__photo-caption {
  position: absolute;
  left: 20px;
  bottom: 18px;
  max-width: 74%;
  color: var(--white);
  z-index: 2;
}
.hero__photo-caption strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
}
.hero__photo-caption span {
  font-size: 0.78rem;
  opacity: 0.85;
}

.float-card {
  position: absolute;
  background: var(--white);
  border-radius: var(--r-md);
  padding: 14px 16px;
  box-shadow: var(--sh-raised);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
  animation: floaty 6s ease-in-out infinite;
  z-index: 3;
}
.float-card--a {
  top: 6%;
  left: -22%;
  animation-delay: -1s;
}
.float-card--b {
  right: -18%;
  top: 44%;
  animation-delay: -3s;
  animation-duration: 7s;
}
.float-card--c {
  right: -14%;
  bottom: -13%;
  animation-delay: -5s;
  animation-duration: 6.5s;
}
@keyframes floaty {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
.float-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--green-mint);
  color: var(--green);
}
.float-card__icon svg {
  width: 20px;
  height: 20px;
}
.float-card__icon--orange {
  background: var(--orange-soft);
  color: var(--orange-dark);
}
.float-card__icon--teal {
  background: #e3eeec;
  color: var(--hub-jobs);
}
.float-card strong {
  display: block;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}
.float-card small {
  color: var(--muted);
  font-size: 0.78rem;
}
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  margin-right: 6px;
  box-shadow: 0 0 0 0 rgba(224, 83, 61, 0.6);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(224, 83, 61, 0.6);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(224, 83, 61, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(224, 83, 61, 0);
  }
}
.stars {
  color: var(--orange);
  letter-spacing: 1px;
  font-size: 0.8rem;
}

@media (max-width: 960px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }
  .hero__visual {
    max-width: 100%;
    margin-top: 20px;
  }
  .hero__photo {
    aspect-ratio: 16 / 11;
    transform: none;
  }
  .float-card--a {
    left: 10px;
    top: 14px;
  }
  .float-card--b {
    right: 10px;
    top: auto;
    bottom: 60px;
  }
  .float-card--c {
    display: none;
  }
}

/* Hero — page variants (dark) */
.hero--dark {
  color: rgba(255, 255, 255, 0.85);
  background: var(--green-deep);
}
.hero--dark h1,
.hero--dark h2 {
  color: var(--white);
}
.hero--dark .lead {
  color: rgba(255, 255, 255, 0.78);
}
.hero--dark .eyebrow {
  color: var(--orange);
}
.hero--dark .hero__proof-text,
.hero--dark .hero__proof-text strong {
  color: rgba(255, 255, 255, 0.85);
}
.hero--dark .avatar-stack img,
.hero--dark .avatar-stack span {
  border-color: var(--green-deep);
}
.hero--dark .hero__grid {
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
}
.hero--dark .blob--green {
  background: radial-gradient(circle at 30% 30%, rgba(138, 158, 82, 0.9), transparent 65%);
}
.hero--dark .blob--orange {
  background: radial-gradient(circle at 60% 40%, rgba(194, 96, 61, 0.55), transparent 65%);
}
.hero--dark .blob--mint {
  background: radial-gradient(circle at 50% 50%, rgba(94, 143, 140, 0.5), transparent 70%);
}
.hero--dark .hero__photo-caption {
  color: var(--white);
}
.hero--dark h1 .accent {
  color: var(--orange);
}
.hero--dark h1 .accent::after {
  background: rgba(194, 96, 61, 0.22);
}

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */
.marquee {
  --gap: 14px;
  position: relative;
  overflow: hidden;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: var(--gap);
  width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}
.marquee--reverse .marquee__track {
  animation-direction: reverse;
  animation-duration: 56s;
}
@keyframes marquee {
  to {
    transform: translateX(calc(-50% - var(--gap) / 2));
  }
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: var(--green-mint);
  color: var(--green);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  border: 1px solid var(--green-mint-border);
}
.chip--orange {
  background: var(--orange-soft);
  color: var(--orange-dark);
  border-color: #ecc9b8;
}
.chip--teal {
  background: #e3eeec;
  color: var(--hub-jobs);
  border-color: #c9dcd9;
}
.chip--violet {
  background: #f0e6eb;
  color: var(--hub-learn);
  border-color: #dfcdd8;
}
.chip--outline {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-soft);
}
.chip svg {
  width: 14px;
  height: 14px;
}

/* --------------------------------------------------------------------------
   Cards & grids
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
}
.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1000px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

.card {
  position: relative;
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 30px 28px;
  box-shadow: var(--sh-soft);
  border: 1px solid rgba(43, 33, 24, 0.05);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.3s;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-card), 0 24px 40px rgba(43, 33, 24, 0.08);
  border-color: rgba(107, 127, 59, 0.14);
}
.card--glow::before {
  /* cursor-follow glow (set via --mx/--my in JS) */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(194, 96, 61, 0.12), transparent 45%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.card--glow:hover::before {
  opacity: 1;
}
.card__icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--green-mint);
  color: var(--green);
  margin-bottom: 22px;
  transition: transform 0.45s var(--spring), background 0.3s;
}
.card__icon svg {
  width: 24px;
  height: 24px;
}
.card:hover .card__icon {
  transform: rotate(-6deg) scale(1.08);
}
.card h3 {
  margin-bottom: 10px;
}
.card p {
  color: var(--ink-soft);
  font-size: 0.97rem;
  margin: 0;
}
.card .link-arrow {
  margin-top: 18px;
}

/* Steps */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  counter-reset: step;
}
.steps::before {
  content: "";
  position: absolute;
  top: 44px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, var(--green-mint-border), var(--orange), var(--green-mint-border));
  background-size: 200% 100%;
  animation: shimmer 4s linear infinite;
  z-index: 0;
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}
.step {
  position: relative;
  z-index: 1;
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 30px 28px 32px;
  box-shadow: var(--sh-soft);
  border: 1px solid rgba(43, 33, 24, 0.05);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.step:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-card);
}
.step__num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--white);
  background: linear-gradient(140deg, var(--green-soft), var(--green-dark));
  box-shadow: 0 8px 18px rgba(107, 127, 59, 0.25), 0 0 0 6px var(--cream);
  margin-bottom: 22px;
}
.step:nth-child(2) .step__num {
  background: linear-gradient(140deg, var(--orange), var(--orange-dark));
  box-shadow: 0 8px 18px rgba(194, 96, 61, 0.3), 0 0 0 6px var(--cream);
}
.step:nth-child(3) .step__num {
  background: linear-gradient(140deg, var(--hub-jobs-2), var(--hub-jobs));
  box-shadow: 0 8px 18px rgba(63, 107, 107, 0.28), 0 0 0 6px var(--cream);
}
.step h3 {
  margin-bottom: 10px;
}
.step p {
  margin: 0;
  font-size: 0.97rem;
}
@media (max-width: 800px) {
  .steps {
    grid-template-columns: 1fr;
  }
  .steps::before {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Hubs tabs
   -------------------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 8px;
  padding: 6px;
  background: var(--white);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-soft);
  width: max-content;
  max-width: 100%;
  margin: 0 auto clamp(30px, 4vw, 48px);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-soft);
  transition: background 0.35s var(--ease-out), color 0.35s, transform 0.35s var(--spring);
  white-space: nowrap;
}
.tab svg {
  width: 16px;
  height: 16px;
}
.tab:hover {
  color: var(--ink);
  background: var(--cream);
}
.tab[aria-selected="true"] {
  color: var(--white);
  background: var(--tab-color, var(--green));
  box-shadow: 0 8px 18px rgba(43, 33, 24, 0.18);
}
.panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.panel.is-active {
  display: grid;
  animation: panelIn 0.6s var(--ease-out);
}
@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.panel__media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  box-shadow: var(--sh-raised);
  background: linear-gradient(160deg, var(--hub-from, var(--green-soft)), var(--hub-to, var(--green-deep)));
}
.panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.panel__media:hover img {
  transform: scale(1.05);
}
.panel__badge {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--hub-from, var(--green));
  letter-spacing: 0.04em;
}
.panel__copy h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin-bottom: 14px;
}
.panel__copy h3 span {
  color: var(--hub-from, var(--green));
}
.feature-list {
  list-style: none;
  padding: 0;
  margin: 22px 0 28px;
  display: grid;
  gap: 12px;
}
.feature-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.97rem;
}
.feature-list svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--hub-from, var(--green));
  margin-top: 1px;
}
@media (max-width: 860px) {
  .panel {
    grid-template-columns: 1fr;
  }
  .panel.is-active {
    display: grid;
  }
}

/* --------------------------------------------------------------------------
   Mentor cards
   -------------------------------------------------------------------------- */
.mentor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: clamp(18px, 2.4vw, 26px);
}
.mentor-card {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--sh-soft);
  border: 1px solid rgba(43, 33, 24, 0.05);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
  cursor: pointer;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.mentor-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--orange), var(--green-soft));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.mentor-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-card), 0 24px 40px rgba(43, 33, 24, 0.08);
}
.mentor-card:hover::after {
  transform: scaleX(1);
}
.mentor-card__top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(140deg, var(--green-mint), #e3e6cf);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--green);
  font-size: 1.15rem;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar--lg {
  width: 96px;
  height: 96px;
  border-radius: 28px;
  font-size: 1.7rem;
}
.mentor-card__name {
  font-weight: 700;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.2;
}
.mentor-card__role {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 3px;
}
.mentor-card__bio {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mentor-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}
.mentor-card__chips .chip {
  padding: 5px 11px;
  font-size: 0.74rem;
}
.mentor-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--muted);
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--green-mint);
  color: var(--green);
}
.badge svg {
  width: 12px;
  height: 12px;
}

/* Skeleton */
.skeleton {
  pointer-events: none;
}
.skeleton .sk {
  background: linear-gradient(90deg, #ece4d6 25%, #f5efe6 50%, #ece4d6 75%);
  background-size: 200% 100%;
  animation: sk 1.4s infinite;
  border-radius: 8px;
}
@keyframes sk {
  to {
    background-position: -200% 0;
  }
}

/* Directory toolbar */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}
.search {
  position: relative;
  flex: 1 1 320px;
  max-width: 460px;
}
.search input {
  width: 100%;
  padding: 15px 18px 15px 50px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--sh-soft);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.search input:focus {
  outline: none;
  border-color: var(--green-mint-border);
  box-shadow: 0 0 0 4px rgba(107, 127, 59, 0.1);
}
.search svg {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--muted);
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 34px;
}
.filter {
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--line);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-soft);
  transition: all 0.3s var(--ease-out);
}
.filter:hover {
  border-color: var(--green-mint-border);
  color: var(--green);
  transform: translateY(-1px);
}
.filter.is-active {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
  box-shadow: 0 8px 18px rgba(107, 127, 59, 0.22);
}
.results-count {
  font-size: 0.9rem;
  color: var(--muted);
}
.empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
  grid-column: 1 / -1;
}
.empty strong {
  display: block;
  color: var(--ink);
  font-size: 1.1rem;
  margin-bottom: 6px;
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-out), visibility 0s 0.35s;
}
.modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s var(--ease-out), visibility 0s;
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(43, 33, 24, 0.55);
  backdrop-filter: blur(6px);
}
.modal__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: var(--white);
  border-radius: var(--r-xl);
  padding: 34px;
  box-shadow: var(--sh-raised);
  transform: translateY(24px) scale(0.98);
  transition: transform 0.45s var(--spring);
}
.modal.is-open .modal__panel {
  transform: none;
}
.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cream);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  transition: background 0.3s, transform 0.3s var(--spring);
}
.modal__close:hover {
  background: var(--green-mint);
  transform: rotate(90deg);
}
.modal__close svg {
  width: 18px;
  height: 18px;
}
.modal__head {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 22px;
}
.modal__head h3 {
  font-size: 1.4rem;
}
.modal__section {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 22px 0 10px;
}
.modal .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.modal__bio {
  font-size: 0.95rem;
  white-space: pre-line;
}
.modal .btn-row {
  margin-top: 28px;
}

/* --------------------------------------------------------------------------
   Split feature (image + copy)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.split--reverse .split__media {
  order: 2;
}
.split__media {
  position: relative;
}
.split__img {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
  box-shadow: var(--sh-raised);
  background: linear-gradient(160deg, var(--green-soft), var(--green-deep));
}
.split__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.split__media:hover .split__img img {
  transform: scale(1.04);
}
.split__deco {
  position: absolute;
  inset: -14px auto auto -14px;
  width: 48%;
  height: 48%;
  border-radius: var(--r-xl);
  border: 2px dashed var(--green-mint-border);
  z-index: -1;
}
.split__deco--orange {
  inset: auto -14px -14px auto;
  border-color: #ecc9b8;
}
.split .float-card {
  position: absolute;
}
.split__copy h2 {
  margin-bottom: 18px;
}
@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }
  .split--reverse .split__media {
    order: 0;
  }
}

/* --------------------------------------------------------------------------
   Stats
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.stat {
  padding: 30px 26px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  transition: transform 0.45s var(--ease-out), background 0.3s;
}
.stat:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.1);
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat__num .suffix {
  color: var(--orange);
}
.stat__label {
  margin-top: 10px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 900px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Testimonials carousel
   -------------------------------------------------------------------------- */
.carousel {
  position: relative;
}
.carousel__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 10px 4px 30px;
  cursor: grab;
}
.carousel__track::-webkit-scrollbar {
  display: none;
}
.carousel__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}
.quote {
  flex: 0 0 min(420px, 85vw);
  scroll-snap-align: start;
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 34px 32px;
  box-shadow: var(--sh-soft);
  border: 1px solid rgba(43, 33, 24, 0.05);
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
  user-select: none;
}
.quote:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-card);
}
.quote__mark {
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 0.6;
  color: var(--orange);
  font-weight: 700;
}
.quote p {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.6;
}
.quote__who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.quote__who img,
.quote__who span.avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  font-size: 0.9rem;
}
.quote__who strong {
  display: block;
  color: var(--ink);
  font-size: 0.95rem;
}
.quote__who small {
  color: var(--muted);
  font-size: 0.8rem;
}
.carousel__nav {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.carousel__btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--green);
  transition: background 0.3s, transform 0.3s var(--spring), box-shadow 0.3s;
}
.carousel__btn:hover {
  background: var(--green);
  color: var(--white);
  transform: scale(1.06);
  box-shadow: 0 8px 18px rgba(107, 127, 59, 0.25);
}
.carousel__btn svg {
  width: 20px;
  height: 20px;
}

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */
.faq {
  max-width: 820px;
  margin-inline: auto;
  display: grid;
  gap: 12px;
}
.faq__item {
  background: var(--card);
  border-radius: var(--r-md);
  border: 1px solid rgba(43, 33, 24, 0.06);
  box-shadow: var(--sh-soft);
  overflow: hidden;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.faq__item.is-open {
  border-color: var(--green-mint-border);
  box-shadow: var(--sh-card);
}
.faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  font-size: 1.02rem;
}
.faq__q span.plus {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green-mint);
  color: var(--green);
  display: grid;
  place-items: center;
  transition: transform 0.4s var(--ease-out), background 0.3s, color 0.3s;
}
.faq__q span.plus svg {
  width: 16px;
  height: 16px;
}
.faq__item.is-open .faq__q span.plus {
  transform: rotate(45deg);
  background: var(--green);
  color: var(--white);
}
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-out);
}
.faq__a-inner {
  padding: 0 24px 24px;
  font-size: 0.97rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Download band
   -------------------------------------------------------------------------- */
.download {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  padding: clamp(32px, 4vw, 52px) clamp(32px, 5vw, 64px);
  background: radial-gradient(900px 500px at 0% 0%, rgba(138, 158, 82, 0.8), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(194, 96, 61, 0.5), transparent 60%), var(--green-dark);
  color: var(--white);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
  box-shadow: var(--sh-glow);
}
.download h2 {
  color: var(--white);
  margin-bottom: 12px;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
}
.download p {
  color: rgba(255, 255, 255, 0.8);
  max-width: 48ch;
}
.download__phone {
  position: relative;
  justify-self: center;
  width: min(190px, 30vh);
  aspect-ratio: 9 / 18.5;
  border-radius: 30px;
  background: #1c1510;
  border: 6px solid #2b2118;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  transform: rotate(-6deg) translateY(10px);
  transition: transform 0.8s var(--ease-out);
}
.download:hover .download__phone {
  transform: rotate(-2deg) translateY(0);
}
.download__screen {
  position: absolute;
  inset: 0;
  background: var(--cream);
  padding: 30px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.download__notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 16px;
  border-radius: 12px;
  background: #1c1510;
}
.mock-row {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--white);
  border-radius: 10px;
  padding: 8px;
  box-shadow: var(--sh-soft);
  animation: mockIn 0.8s var(--ease-out) both;
}
.mock-row:nth-child(2) { animation-delay: 0.1s; }
.mock-row:nth-child(3) { animation-delay: 0.2s; }
.mock-row:nth-child(4) { animation-delay: 0.3s; }
.mock-row:nth-child(5) { animation-delay: 0.4s; }
@keyframes mockIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.mock-row .ic {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex-shrink: 0;
}
.mock-row .ln {
  height: 8px;
  border-radius: 4px;
  background: #e6dccb;
}
.mock-row .ln.w1 {
  width: 70%;
  margin-bottom: 6px;
  background: #d8cfc0;
}
.mock-row .ln.w2 {
  width: 45%;
}
.mock-hero {
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(140deg, var(--green-soft), var(--green-dark));
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.2;
}
.mock-hero small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.65rem;
  opacity: 0.8;
  margin-top: 4px;
}
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 14px;
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  transition: transform 0.35s var(--spring), box-shadow 0.35s;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.store-badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3);
}
.store-badge svg {
  width: 26px;
  height: 26px;
}
.store-badge small {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}
.store-badge strong {
  display: block;
  font-size: 1rem;
  line-height: 1.15;
}
@media (max-width: 860px) {
  .download {
    grid-template-columns: 1fr;
  }
  .download__phone {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-card {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--sh-card);
  border: 1px solid rgba(43, 33, 24, 0.05);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field--full {
  grid-column: 1 / -1;
}
.field label {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink);
}
.field label .opt {
  font-weight: 400;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--cream);
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(107, 127, 59, 0.12);
}
.field textarea {
  min-height: 130px;
  resize: vertical;
}
.field .hint {
  font-size: 0.78rem;
  color: var(--muted);
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px rgba(224, 83, 61, 0.12);
}
.field .err {
  font-size: 0.78rem;
  color: var(--danger);
  display: none;
}
.field.is-invalid .err {
  display: block;
  animation: shake 0.4s;
}
@keyframes shake {
  20%,
  60% {
    transform: translateX(-3px);
  }
  40%,
  80% {
    transform: translateX(3px);
  }
}
.chip-select {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip-select .filter {
  background: var(--cream);
}
.chip-select .filter.is-active {
  background: var(--green);
}
.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.check input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--green);
  flex-shrink: 0;
}
.form-msg {
  margin-top: 14px;
  font-size: 0.92rem;
  min-height: 1.4em;
}
.form-msg.err {
  color: var(--danger);
}
.form-msg.ok {
  color: var(--success);
}
.form-success {
  text-align: center;
  padding: 30px 10px;
  animation: panelIn 0.6s var(--ease-out);
}
.form-success__icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin: 0 auto 22px;
  background: var(--green-mint);
  color: var(--green);
  display: grid;
  place-items: center;
}
.form-success__icon svg {
  width: 40px;
  height: 40px;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: draw 0.8s var(--ease-out) 0.2s forwards;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Newsletter */
.newsletter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--sh-card);
  border: 1px solid rgba(43, 33, 24, 0.05);
}
.newsletter h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.newsletter p {
  margin: 0;
  font-size: 0.95rem;
}
.newsletter form {
  display: flex;
  gap: 10px;
}
.newsletter input {
  flex: 1;
  padding: 15px 18px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  background: var(--cream);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.newsletter input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(107, 127, 59, 0.12);
}
@media (max-width: 800px) {
  .newsletter {
    grid-template-columns: 1fr;
  }
  .newsletter form {
    flex-direction: column;
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--green-deep);
  color: rgba(255, 255, 255, 0.7);
  padding: clamp(56px, 7vw, 90px) 0 36px;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute;
  inset: auto -10% -40% auto;
  width: 60vw;
  height: 60vw;
  max-width: 700px;
  max-height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(138, 158, 82, 0.35), transparent 65%);
  pointer-events: none;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  position: relative;
}
.footer__brand p {
  max-width: 34ch;
  font-size: 0.95rem;
  margin-top: 16px;
}
.footer h4 {
  color: var(--white);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.footer a {
  transition: color 0.3s, padding-left 0.3s;
  font-size: 0.95rem;
}
.footer a:hover {
  color: var(--white);
  padding-left: 4px;
}
.footer__bottom {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  position: relative;
}
.footer__bottom .heart {
  color: var(--orange);
}
.social {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.social a {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.3s, transform 0.3s var(--spring);
}
.social a:hover {
  background: var(--orange);
  color: var(--green-deep);
  transform: translateY(-3px);
  padding-left: 0;
}
.social svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 520px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */
.legal {
  padding-top: calc(var(--nav-h) + 40px);
}
.legal__wrap {
  max-width: 800px;
  margin-inline: auto;
}
.legal h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 10px;
}
.legal .updated {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 40px;
}
.legal h2 {
  font-size: 1.4rem;
  margin: 40px 0 12px;
}
.legal h3 {
  font-size: 1.05rem;
  margin: 22px 0 8px;
}
.legal ul {
  padding-left: 22px;
}
.legal li {
  margin-bottom: 6px;
}
.legal .callout {
  background: var(--green-mint);
  border: 1px solid var(--green-mint-border);
  border-radius: var(--r-md);
  padding: 20px 22px;
  margin: 24px 0;
}
.legal ol.numbered {
  counter-reset: n;
  list-style: none;
  padding: 0;
  display: grid;
  gap: 14px;
}
.legal ol.numbered li {
  position: relative;
  padding-left: 52px;
  counter-increment: n;
}
.legal ol.numbered li::before {
  content: counter(n);
  position: absolute;
  left: 0;
  top: -2px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-weight: 700;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.reveal--left {
  transform: translateX(-30px);
}
.reveal--right {
  transform: translateX(30px);
}
.reveal--scale {
  transform: scale(0.94);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Hero entrance (runs on load, no observer) */
.hero .enter {
  opacity: 0;
  transform: translateY(22px);
  animation: enter 1s var(--ease-out) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes enter {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Scroll progress bar */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--orange), var(--green-soft));
  z-index: 200;
  transition: width 0.1s linear;
}

/* Back to top */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  display: grid;
  place-items: center;
  box-shadow: var(--sh-raised);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.35s, transform 0.35s var(--spring), visibility 0s 0.35s, background 0.3s;
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.35s, transform 0.35s var(--spring), visibility 0s, background 0.3s;
}
.to-top:hover {
  background: var(--orange);
  color: var(--green-deep);
}
.to-top svg {
  width: 20px;
  height: 20px;
}

/* Utilities */
.text-center {
  text-align: center;
}
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 40px; }
.mt-6 { margin-top: 64px; }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--muted); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .hero .enter {
    opacity: 1;
    transform: none;
  }
  .marquee__track {
    animation: none;
  }
}

/* Fallback when an Unsplash image fails: parent keeps its brand gradient */
.img-fallback { background: linear-gradient(160deg, var(--green-soft), var(--green-deep)); }


/* THEME: Clean minimal white */
/* Overrides the base tokens/components above. White ground, near-black type,
   a single deep-green accent, hairline borders, no shadows or gradients. */
:root {
  --green: #166534;
  --green-dark: #14532d;
  --green-deep: #0a0a0a;
  --green-soft: #15803d;
  --green-mint: #f0fdf4;
  --green-mint-border: #dcfce7;
  --orange: #166534;
  --orange-dark: #14532d;
  --orange-soft: #f0fdf4;
  --hub-connect: #166534;
  --hub-jobs: #166534;
  --hub-jobs-2: #15803d;
  --hub-enterprise: #166534;
  --hub-learn: #166534;
  --hub-learn-2: #15803d;
  --cream: #ffffff;
  --card: #ffffff;
  --ink: #0a0a0a;
  --ink-soft: #52525b;
  --muted: #71717a;
  --line: #e5e7eb;
  --font-display: "Inter Tight", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --sh-soft: none;
  --sh-card: none;
  --sh-raised: 0 1px 2px rgba(0, 0, 0, 0.04);
  --sh-glow: none;
  --grey-bg: #fafafa;
  --grey-tint: #f4f4f5;
}
h1, h2, .display { letter-spacing: -0.03em; }
h1 { font-weight: 700; }
.wordmark .wi { color: var(--green); }
.wordmark .rest, .wordmark--light .rest { color: var(--ink); }
.eyebrow { color: var(--muted); }
.eyebrow::before { background: var(--green); }
.section--deep .eyebrow, .hero--dark .eyebrow { color: var(--muted); }

/* Kill decoration */
.blob, .hero__grid, .split__deco, .btn::after, .card--glow::before, .footer::before, .steps::before, #impact > img { display: none !important; }
.section--mint { background: var(--grey-bg); }
.section--deep {
  background: var(--grey-bg);
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section--deep h2, .section--deep h3 { color: var(--ink); }
.section--deep .lead { color: var(--ink-soft); }
.stat { background: var(--card); border: 1px solid var(--line); backdrop-filter: none; }
.stat:hover { background: var(--card); transform: none; border-color: #d4d4d8; }
.stat__num { color: var(--ink); }
.stat__num .suffix { color: var(--green); }
.stat__label { color: var(--muted); }

/* Hero (both light and formerly-dark variants are white now) */
.hero--dark { background: var(--cream); color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.hero--dark h1, .hero--dark h2 { color: var(--ink); }
.hero--dark .lead { color: var(--ink-soft); }
.hero--dark .hero__proof-text { color: var(--muted); }
.hero--dark .hero__proof-text strong { color: var(--ink); }
.hero--dark .avatar-stack img, .hero--dark .avatar-stack span { border-color: var(--cream); }
.hero h1 .accent, .hero--dark h1 .accent { color: var(--green); }
.hero h1 .accent::after { display: none; }
.hero__photo { transform: rotate(-2.5deg) !important; border: 1px solid var(--line); transition: transform 0.6s var(--ease-out); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); }
.hero__visual:hover .hero__photo { transform: rotate(-1deg) !important; }
@media (max-width: 960px) { .hero__photo { transform: none !important; } }
.hero__photo::after { background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.55) 100%); }
.nav--dark:not(.is-scrolled) { color: var(--ink); }
.nav--dark:not(.is-scrolled) .wordmark .rest { color: var(--ink); }
.nav--dark:not(.is-scrolled) .nav__links a { color: var(--ink-soft); }
.nav--dark:not(.is-scrolled) .nav__links a:hover { color: var(--ink); }
.nav.is-scrolled { background: rgba(255, 255, 255, 0.85); box-shadow: 0 1px 0 var(--line); }
.nav__links a::after { background: var(--green); }
.btn--ghost-light { --btn-fg: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost-light:hover { background: var(--grey-tint); box-shadow: inset 0 0 0 1px #d4d4d8; }
.btn--ghost { box-shadow: inset 0 0 0 1px var(--line); --btn-fg: var(--ink); }
.btn--ghost:hover { background: var(--grey-tint); box-shadow: inset 0 0 0 1px #d4d4d8; }
.btn:hover { transform: translateY(-1px); box-shadow: none; }
.btn--orange, .btn--orange:hover { --btn-bg: var(--ink); --btn-fg: var(--white); box-shadow: none; }
.btn--white { --btn-fg: var(--ink); }

/* Cards & surfaces: hairline borders, no shadows */
.card, .step, .mentor-card, .faq__item, .form-card, .newsletter, .quote, .modal__panel {
  border: 1px solid var(--line);
  box-shadow: none;
}
.card:hover, .step:hover, .mentor-card:hover, .quote:hover { transform: translateY(-2px); box-shadow: none; border-color: #d4d4d8; }
.card__icon, .float-card__icon { background: var(--grey-tint) !important; color: var(--ink) !important; }
.card:hover .card__icon { transform: none; }
.step__num { background: var(--ink); box-shadow: 0 0 0 4px var(--cream); }
.mentor-card::after { background: var(--green); }
.avatar { background: var(--grey-tint); color: var(--ink); }
.badge { background: var(--green-mint); color: var(--green); }
.chip, .chip--orange, .chip--teal, .chip--violet { background: var(--grey-tint); color: var(--ink-soft); border-color: transparent; }
.chip--outline { background: transparent; border-color: var(--line); }
.filter { border-color: var(--line); }
.filter.is-active { background: var(--ink); border-color: var(--ink); box-shadow: none; }
.search input { box-shadow: none; }
.tabs { box-shadow: none; border: 1px solid var(--line); }
.tab[aria-selected="true"] { background: var(--ink); box-shadow: none; }
.panel__media, .split__img { box-shadow: none; border: 1px solid var(--line); background: var(--grey-tint); }
.panel__badge { color: var(--ink); }
.panel__copy h3 span { color: var(--green); }
.feature-list svg { color: var(--green); }
.faq__item.is-open { box-shadow: none; border-color: #d4d4d8; }
.faq__q span.plus { background: var(--grey-tint); color: var(--ink); }
.faq__item.is-open .faq__q span.plus { background: var(--ink); }
.quote__mark { color: var(--green); }
.carousel__btn:hover { background: var(--ink); box-shadow: none; }
.field input, .field select, .field textarea, .newsletter input { background: var(--card); }
.field input:focus, .field select:focus, .field textarea:focus, .newsletter input:focus { box-shadow: 0 0 0 3px rgba(22, 101, 52, 0.15); }
.legal .callout { background: var(--grey-bg); border-color: var(--line); }
.legal ol.numbered li::before { background: var(--ink); }
.progress { background: var(--green); }
.to-top { background: var(--ink); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
.to-top:hover { background: var(--green); color: var(--white); }
.skeleton .sk { background: linear-gradient(90deg, #f4f4f5 25%, #fafafa 50%, #f4f4f5 75%); background-size: 200% 100%; }

/* Download band: the one dark surface */
.download { background: var(--ink); box-shadow: none; border-radius: var(--r-xl); }
.download .eyebrow { color: rgba(255, 255, 255, 0.6) !important; }
.download__phone { transform: rotate(-4deg); }
.store-badge { box-shadow: none; }
.mock-row .ic { background: var(--grey-tint) !important; }
.mock-hero { background: var(--green); }

/* Footer: white, hairline top border */
.footer { background: var(--cream); color: var(--muted); border-top: 1px solid var(--line); }
.footer h4 { color: var(--ink); }
.footer a:hover { color: var(--ink); }
.footer__bottom { border-top-color: var(--line); }
.footer__bottom .heart { color: var(--green); }
.social a { background: var(--grey-tint); border-color: var(--line); color: var(--ink); }
.social a:hover { background: var(--ink); color: var(--white); }

/* Mobile menu */
.mobile-menu { background: var(--cream); }

/* Compact sizing — keep sections short on small/zoomed screens */
h2 { font-size: clamp(1.6rem, 2.7vw, 2.25rem); }
.section-head { margin-bottom: clamp(24px, 3.5vw, 40px); }
.split { gap: clamp(28px, 4vw, 56px); align-items: center; }
.split__media { width: 100%; max-width: 440px; margin-inline: auto; }
.split__img { aspect-ratio: 4 / 3; }
.split__copy h2 { margin-bottom: 12px; }
.split .grid--2 { gap: 12px; }
.split .card { padding: 16px 16px 18px !important; }
.split .card__icon { width: 38px !important; height: 38px !important; margin-bottom: 10px !important; border-radius: 10px; }
.split .card__icon svg { width: 18px; height: 18px; }
.split .card h3 { font-size: 0.95rem !important; margin-bottom: 4px; }
.split .card p { font-size: 0.82rem !important; line-height: 1.5; }
.split .feature-list { margin: 14px 0 20px; gap: 8px; }
.split .feature-list li { font-size: 0.92rem; }
.card { padding: 24px 22px; }
.step { padding: 24px 22px 26px; }
.step__num { width: 44px; height: 44px; font-size: 1rem; margin-bottom: 16px; }
.stat { padding: 22px 20px; }
.stat__num { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.quote { padding: 26px 24px; flex-basis: min(360px, 85vw); }
.faq__q { padding: 16px 20px; font-size: 0.97rem; }
.faq__a-inner { padding: 0 20px 18px; font-size: 0.92rem; }
.mentor-card { padding: 20px; gap: 12px; }
.panel__media { aspect-ratio: 4 / 3; max-width: 440px; width: 100%; margin-inline: auto; }
.panel__copy h3 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); }
.newsletter { padding: clamp(22px, 3vw, 32px); }
.newsletter h3 { font-size: 1.25rem; }

/* For-mentors: compact list instead of boxed cards so the block fits one screen */
#for-mentors .grid--2 { gap: 14px 20px; margin-top: 18px; }
#for-mentors .card { border: 0; padding: 0 !important; background: transparent; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; }
#for-mentors .card:hover { transform: none; }
#for-mentors .card__icon { width: 34px !important; height: 34px !important; margin: 0 !important; grid-row: 1 / span 2; }
#for-mentors .card h3 { font-size: 0.92rem !important; margin: 0 0 2px; align-self: end; }
#for-mentors .card p { font-size: 0.8rem !important; line-height: 1.45; }
#for-mentors .btn-row { margin-top: 4px; }


/* --------------------------------------------------------------------------
   Month ledger (for-mentors)
   -------------------------------------------------------------------------- */
.ledger__hint { font-size: 0.85rem; max-width: 24ch; text-align: right; }
.ledger { border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: var(--card); }
.ledger__moments { display: grid; grid-template-columns: repeat(4, 1fr); }
.moment {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 22px 26px;
  text-align: left;
  border-right: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  transition: background 0.3s var(--ease-out);
  cursor: pointer;
}
.moment:last-child { border-right: 0; }
.moment:hover { background: var(--grey-bg); }
.moment__row { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.moment__time { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -0.02em; color: var(--ink); text-transform: none; }
.moment__title { font-weight: 600; color: var(--ink); font-size: 1rem; margin-top: 8px; }
.moment__desc { font-size: 0.85rem; line-height: 1.5; }
.moment__check {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--white);
  background: transparent;
  transition: background 0.3s, border-color 0.3s, transform 0.4s var(--spring);
}
.moment__check svg { width: 12px; height: 12px; opacity: 0; transition: opacity 0.2s; }
.moment.is-on .moment__check { background: var(--ink); border-color: var(--ink); }
.moment.is-on .moment__check svg { opacity: 1; }
.moment:not(.is-on) { color: var(--muted); }
.moment:not(.is-on) .moment__title, .moment:not(.is-on) .moment__time { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.moment:not(.is-on) .moment__row { display: flex; }
/* hide the small "10 min" row time when off, keep layout */
.moment:active .moment__check { transform: scale(0.85); }

.ledger__bar {
  display: flex;
  height: 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--grey-bg);
}
.ledger__seg { display: block; height: 100%; width: 0; transition: width 0.6s var(--ease-out); }
.ledger__seg[data-tone="a"] { background: #0a0a0a; }
.ledger__seg[data-tone="b"] { background: #3f3f46; }
.ledger__seg[data-tone="c"] { background: var(--green); }
.ledger__seg[data-tone="d"] { background: #86efac; }
.ledger__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; flex-wrap: wrap; }
.ledger__total { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ledger__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -0.03em; color: var(--ink); }
.ledger__label { font-size: 0.9rem; color: var(--muted); }
@media (max-width: 900px) {
  .ledger__moments { grid-template-columns: 1fr 1fr; }
  .moment:nth-child(2) { border-right: 0; }
  .moment:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .ledger__hint { text-align: left; max-width: none; }
}
@media (max-width: 560px) {
  .ledger__moments { grid-template-columns: 1fr; }
  .moment { border-right: 0; border-bottom: 1px solid var(--line); }
  .moment:last-child { border-bottom: 0; }
}

.moment__row { padding-right: 34px; }


/* --------------------------------------------------------------------------
   Chat-style Q&A (replaces the accordion FAQ)
   -------------------------------------------------------------------------- */
.qa { display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; align-items: start; }
.qa__list { display: grid; gap: 8px; }
.qa__q {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  width: 100%;
  padding: 0;
  transition: transform 0.3s var(--ease-out);
}
.qa__avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--grey-tint);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-top: 4px;
}
.qa__bubble {
  flex: 1;
  padding: 11px 14px 12px;
  border-radius: 14px 14px 14px 4px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-weight: 500;
  font-size: 0.93rem;
  line-height: 1.4;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.qa__who { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.qa__q:hover .qa__bubble { border-color: #d4d4d8; background: var(--grey-bg); }
.qa__q.is-active { transform: translateX(6px); }
.qa__q.is-active .qa__bubble { background: var(--ink); border-color: var(--ink); color: var(--white); }
.qa__q.is-active .qa__who { color: rgba(255, 255, 255, 0.6); }

.qa__panel {
  position: sticky;
  top: calc(var(--nav-h) + 16px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--grey-bg);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 300px;
}
.qa__panel-head { display: flex; align-items: center; gap: 12px; }
.qa__mentor { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--green-mint); flex-shrink: 0; }
.qa__mentor img { width: 100%; height: 100%; object-fit: cover; }
.qa__panel-head strong { display: block; font-size: 0.92rem; color: var(--ink); }
.qa__panel-head small { font-size: 0.78rem; color: var(--muted); }
.qa__answers { position: relative; flex: 1; }
.qa__a { display: none; }
.qa__a.is-active { display: block; animation: qaIn 0.45s var(--ease-out); }
@keyframes qaIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.qa__quote { font-size: 0.8rem; color: var(--muted); padding-left: 10px; border-left: 2px solid var(--line); margin-bottom: 10px; }
.qa__a p {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px 14px 14px 14px;
  padding: 14px 16px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
}
.qa__panel-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.88rem; padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 860px) {
  .qa { grid-template-columns: 1fr; }
  .qa__panel { position: static; }
  .qa__q.is-active { transform: none; }
}

/* Q&A compact */
#faq .section-head { margin-bottom: 18px; }
.qa__list { gap: 6px; }
.qa__bubble { padding: 7px 12px 8px; font-size: 0.88rem; }
.qa__who { font-size: 0.62rem; margin-bottom: 1px; }
.qa__avatar { width: 26px; height: 26px; font-size: 0.66rem; margin-top: 6px; }
.qa__panel { min-height: 0; padding: 16px 18px 14px; }
.qa__a p { padding: 12px 14px; font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   Auth (login / register / reset) + account
   -------------------------------------------------------------------------- */
.nav__user { display: flex; align-items: center; gap: 8px; }
.nav__chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; font-size: 0.88rem; color: var(--ink); transition: background 0.3s; }
.nav__chip:hover { background: var(--grey-tint); }
.nav__avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--white); font-size: 0.7rem; font-weight: 700; display: grid; place-items: center; }
@media (max-width: 900px) { .nav__user .btn { display: none; } }

.auth { min-height: 100vh; padding: calc(var(--nav-h) + 28px) var(--gutter) 48px; display: grid; place-items: start center; background: var(--grey-bg); }
.auth__card { width: min(440px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(24px, 4vw, 36px); }
.auth__card--wide { width: min(600px, 100%); }
.auth__title { font-size: clamp(1.6rem, 3vw, 2rem); margin: 4px 0 6px; }
.auth__sub { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 18px; }
.auth form { display: grid; gap: 14px; }
.auth .form-grid { gap: 14px; }
.auth__row { display: flex; justify-content: flex-end; }
.auth__link { font-size: 0.85rem; font-weight: 600; color: var(--green); background: none; padding: 0; }
.auth__link:hover { text-decoration: underline; }
.auth__foot { text-align: center; font-size: 0.9rem; color: var(--ink-soft); margin: 18px 0 0; }
.auth__foot a { color: var(--green); font-weight: 600; }
.auth__actions { margin-top: 20px; }
.auth__back { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 4px; }
.auth__back::before { content: "←"; }
.auth__back:hover { color: var(--ink); }
.pass { position: relative; }
.pass input { padding-right: 46px; }
.pass__toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.pass__toggle:hover { background: var(--grey-tint); color: var(--ink); }
.pass__toggle svg { width: 18px; height: 18px; }
.otp { letter-spacing: 0.4em; font-size: 1.3rem; font-weight: 600; text-align: center; }

.alert { padding: 11px 14px; border-radius: 10px; font-size: 0.88rem; line-height: 1.45; margin-bottom: 14px; border: 1px solid; }
.alert--err { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert--ok { background: var(--green-mint); border-color: var(--green-mint-border); color: var(--green-dark); }
.alert--warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }

.steps-bar { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; }
.segs { display: flex; gap: 6px; margin: 14px 0 18px; }
.seg { flex: 1; height: 5px; border-radius: 3px; background: var(--line); transition: background 0.4s; }
.seg.is-on { background: var(--green); }

.roles { display: grid; gap: 10px; }
.role { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: var(--card); transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease-out); }
.role:hover { border-color: #d4d4d8; background: var(--grey-bg); }
.role.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.role__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--grey-tint); display: grid; place-items: center; font-size: 1.2rem; flex-shrink: 0; }
.role__text { flex: 1; }
.role__text strong { display: block; color: var(--ink); font-size: 0.98rem; }
.role__text small { color: var(--muted); font-size: 0.82rem; }
.role__check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); flex-shrink: 0; display: grid; place-items: center; }
.role.is-on .role__check { background: var(--ink); border-color: var(--ink); }
.role.is-on .role__check::after { content: ""; width: 6px; height: 10px; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }

.verify { text-align: center; padding: 10px 0 4px; }
.verify__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--green-mint); color: var(--green); display: grid; place-items: center; margin: 0 auto 14px; }
.verify__icon svg { width: 28px; height: 28px; }

.account { min-height: 100vh; padding: calc(var(--nav-h) + 28px) 0 60px; background: var(--grey-bg); }
.account__grid { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.account__card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px; }
.account__avatar { width: 64px; height: 64px; border-radius: 20px; background: var(--ink); color: var(--white); font-weight: 700; font-size: 1.3rem; display: grid; place-items: center; margin-bottom: 12px; }
.account__name { font-size: 1.25rem; margin-bottom: 2px; }
.account__links { display: grid; gap: 8px; margin-top: 18px; }
.account .form-card { padding: clamp(20px, 3vw, 28px); }
@media (max-width: 860px) { .account__grid { grid-template-columns: 1fr; } }

/* The hidden attribute must always win over component display rules (auth nav toggles). */
[hidden] { display: none !important; }

/* Anchored sections clear the fixed nav when jumped to */
section[id] { scroll-margin-top: calc(var(--nav-h) + 8px); }


/* --------------------------------------------------------------------------
   Assistant chat (Q&A panel)
   -------------------------------------------------------------------------- */
.qa__thread { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 0.9rem; line-height: 1.5; animation: qaIn 0.35s var(--ease-out); }
.msg--bot { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-top-left-radius: 4px; color: var(--ink); }
.msg--user { align-self: flex-end; background: var(--ink); color: var(--white); border-top-right-radius: 4px; }
.msg__src { display: block; margin-top: 6px; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.msg--typing { padding: 12px 14px; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dot 1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-4px); opacity: 1; } }
.qa__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qa__chips .chip { cursor: pointer; padding: 6px 11px; font-size: 0.76rem; transition: background 0.2s, color 0.2s; }
.qa__chips .chip:hover { background: var(--ink); color: var(--white); }
.qa__ask { display: flex; gap: 8px; align-items: center; padding-top: 10px; border-top: 1px solid var(--line); }
.qa__ask input { flex: 1; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 0.9rem; }
.qa__ask input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(22, 101, 52, 0.12); }
.qa__ask .btn { padding: 10px 14px; border-radius: 999px; }
.qa__ask .btn svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   Floating assistant widget
   -------------------------------------------------------------------------- */
.chatbot { position: fixed; right: 22px; bottom: 22px; z-index: 150; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.chatbot__fab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 14px; border-radius: 999px; background: var(--ink); color: var(--white); font-weight: 600; font-size: 0.92rem; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); transition: transform 0.3s var(--spring), background 0.3s; }
.chatbot__fab:hover { transform: translateY(-2px); background: var(--green); }
.chatbot__fab svg { width: 18px; height: 18px; }
.chatbot__panel { width: min(380px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); padding: 14px 16px 14px; display: flex; flex-direction: column; gap: 10px; animation: qaIn 0.35s var(--ease-out); }
.chatbot__head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.chatbot__head strong { display: block; font-size: 0.92rem; color: var(--ink); }
.chatbot__head small { font-size: 0.75rem; color: var(--muted); }
.chatbot__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--green); color: var(--white); font-weight: 700; font-size: 0.8rem; display: grid; place-items: center; flex-shrink: 0; }
.chatbot__close { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.chatbot__close:hover { background: var(--grey-tint); color: var(--ink); }
.chatbot__close svg { width: 16px; height: 16px; }
.chatbot__thread { min-height: 200px; max-height: min(46vh, 380px); }
.chatbot.is-open .chatbot__fab { background: var(--green); }
/* keep back-to-top clear of the chat button */
.to-top { bottom: 84px; }
@media (max-width: 560px) { .chatbot { right: 12px; bottom: 12px; } .chatbot__fab span { display: none; } .chatbot__fab { padding: 14px; } }
/* Chat panel opens above the button; the button never leaves the corner */
.chatbot { flex-direction: column-reverse; }
.chatbot__thread { min-height: 140px; max-height: min(38vh, 340px); }

/* --------------------------------------------------------------------------
   Account dashboard (mentor / mentee)
   -------------------------------------------------------------------------- */
.tabbar { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); margin-bottom: 18px; }
.tabbar__tab { padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 0.9rem; color: var(--ink-soft); }
.tabbar__tab:hover { color: var(--ink); }
.tabbar__tab.is-on { background: var(--ink); color: var(--white); }
.dash__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.dash__col { display: grid; gap: 16px; }
.dash__card { padding: 20px; }
.dash__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.dash__title { font-size: 1.05rem; }
.dash__sub { font-size: 0.8rem; margin: 2px 0 0; }
.dash__empty { font-size: 0.88rem; padding: 14px 0 4px; }
.dash__loading { padding: 30px 0; }
.drow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.drow:first-child { border-top: 0; padding-top: 2px; }
.drow--dim { opacity: 0.55; }
.drow__avatar { width: 40px; height: 40px; border-radius: 12px; background: var(--grey-tint); color: var(--ink); font-weight: 700; font-size: 0.82rem; display: grid; place-items: center; flex-shrink: 0; }
.drow__body { flex: 1; min-width: 0; }
.drow__body strong { display: block; font-size: 0.93rem; color: var(--ink); }
.drow__body small { display: block; font-size: 0.78rem; color: var(--muted); }
.drow__msg { font-style: italic; color: var(--ink-soft) !important; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.drow__actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.drow__actions .btn--sm { padding: 8px 13px; font-size: 0.8rem; }
.dash__form { display: grid; gap: 12px; }
.dash__form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.dash__links { display: grid; gap: 8px; }
.modal__panel--chat { width: min(460px, 100%); display: flex; flex-direction: column; gap: 10px; padding: 24px; }
@media (max-width: 900px) { .dash__cols { grid-template-columns: 1fr; } }

/* A closing/closed modal must never swallow clicks during its fade-out */
.modal:not(.is-open) { pointer-events: none; }

/* --------------------------------------------------------------------------
   Hub pages (Jobs / Learn / Community / Enterprise)
   -------------------------------------------------------------------------- */
.hub { min-height: 100vh; padding: calc(var(--nav-h) + 26px) 0 60px; background: var(--grey-bg); }
.hub__head { margin-bottom: 22px; }
.hub__title { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 4px 0 8px; }
.hub__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.hub__select { padding: 12px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 0.9rem; }
.jobcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: transform 0.3s var(--ease-out), border-color 0.3s; }
.jobcard:hover { transform: translateY(-2px); border-color: #d4d4d8; }
.jobcard__top { display: flex; gap: 12px; align-items: flex-start; }
.jobcard__t { flex: 1; min-width: 0; }
.jobcard__t strong { display: block; font-size: 0.98rem; color: var(--ink); line-height: 1.3; }
.jobcard__t small { color: var(--muted); font-size: 0.8rem; }
.jobcard__save { color: var(--muted); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.jobcard__save svg { width: 18px; height: 18px; }
.jobcard__save:hover { background: var(--grey-tint); color: var(--ink); }
.jobcard__save.is-on { color: #dc2626; }
.jobcard__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.jobcard__chips .chip { padding: 4px 10px; font-size: 0.72rem; }
.jobcard__meta { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; margin-top: auto; }
.learn__bar { height: 6px; border-radius: 3px; background: var(--grey-tint); overflow: hidden; }
.learn__bar span { display: block; height: 100%; background: var(--green); border-radius: 3px; transition: width 0.6s var(--ease-out); }
.learn__cover { border-radius: 10px; overflow: hidden; aspect-ratio: 16/8; background: var(--grey-tint); margin: -4px 0 4px; }
.learn__cover img { width: 100%; height: 100%; object-fit: cover; }
.learn__content { display: grid; gap: 8px; margin-top: 14px; }

/* Notifications bell */
.bell { position: relative; }
.bell__btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-soft); position: relative; background: var(--card); }
.bell__btn:hover { background: var(--grey-tint); color: var(--ink); }
.bell__btn svg { width: 18px; height: 18px; }
.bell__dot { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: #dc2626; }
.bell__panel { position: absolute; right: 0; top: calc(100% + 10px); width: 330px; max-height: 420px; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14); z-index: 130; }
.bell__item { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.bell__item:last-child { border-bottom: 0; }
.bell__item strong { display: block; font-size: 0.86rem; color: var(--ink); }
.bell__item small { display: block; font-size: 0.78rem; color: var(--ink-soft); }
.bell__item.is-unread { background: var(--green-mint); }
@media (max-width: 900px) { .bell { display: none; } }

/* 7-link nav needs slightly tighter links */
.nav__links a { padding: 10px 10px; font-size: 0.92rem; }


/* ==========================================================================
   THEME: Fresh (brand colour) - overrides the minimal block above.
   WiEnergi green + orange, hub colours (connect green, jobs teal, learn
   violet, enterprise orange), soft mint ground, gentle shadows.
   ========================================================================== */
:root {
  --green: #1b5e3a;
  --green-dark: #123f27;
  --green-deep: #0c2a1a;
  --green-soft: #2e7d52;
  --green-mint: #e6f2ea;
  --green-mint-border: #cde6d6;
  --orange: #f39a1f;
  --orange-dark: #d9820a;
  --orange-soft: #fdebcf;
  --hub-connect: #1b5e3a;
  --hub-jobs: #0c5e6b;
  --hub-jobs-2: #1b9aaa;
  --hub-enterprise: #b5650a;
  --hub-learn: #3d2e7c;
  --hub-learn-2: #5c49b8;
  --cream: #f4f7f4;
  --card: #ffffff;
  --ink: #10231a;
  --ink-soft: #3d4f45;
  --muted: #74847b;
  --line: #e3e9e4;
  --grey-bg: #eef3ef;
  --grey-tint: #eef3ef;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --sh-soft: 0 2px 8px rgba(16, 35, 26, 0.05);
  --sh-card: 0 10px 24px rgba(16, 35, 26, 0.08);
  --sh-raised: 0 16px 36px rgba(16, 35, 26, 0.14);
}
body { background: var(--cream); }
.wordmark .wi { color: var(--orange); }
.eyebrow { color: var(--green); }
.eyebrow::before { background: var(--orange); }
.hero h1 .accent, .hero--dark h1 .accent, .panel__copy h3 span { color: var(--green); }
.hero h1 .accent::after { display: block; background: var(--orange-soft); }
.blob, .hero__grid { display: block !important; }
.hero__grid { opacity: 0.6; }
.hero__photo { border: 0; box-shadow: var(--sh-raised); }
.nav.is-scrolled { background: rgba(244, 247, 244, 0.86); }
.nav__links a::after { background: var(--orange); }
.nav__links a.is-active { color: var(--green); }

/* Buttons: green primary, orange accent */
.btn { --btn-bg: var(--green); --btn-fg: var(--white); }
.btn:hover { box-shadow: 0 10px 22px rgba(27, 94, 58, 0.25); }
.btn--orange, .btn--orange:hover { --btn-bg: var(--orange); --btn-fg: var(--green-deep); }
.btn--orange:hover { box-shadow: 0 10px 22px rgba(243, 154, 31, 0.35); }
.btn--ghost, .btn--ghost-light { --btn-fg: var(--green); box-shadow: inset 0 0 0 1.5px var(--green-mint-border); }
.btn--ghost:hover, .btn--ghost-light:hover { background: var(--green-mint); box-shadow: inset 0 0 0 1.5px var(--green-mint-border); }
.btn::after { display: block !important; }
.nav__avatar, .step__num, .filter.is-active, .tab[aria-selected="true"], .qa__q.is-active .qa__bubble, .msg--user, .to-top, .chatbot__fab, .tabbar__tab.is-on, .faq__item.is-open .faq__q span.plus, .legal ol.numbered li::before, .account__avatar { background: var(--green) !important; color: var(--white) !important; }
.chatbot__fab:hover, .to-top:hover { background: var(--orange) !important; color: var(--green-deep) !important; }
.chatbot__avatar { background: var(--orange); color: var(--green-deep); }
.filter.is-active { border-color: var(--green); }
.qa__q.is-active .qa__bubble { border-color: var(--green); }

/* Cards with soft depth + coloured icons */
.card, .step, .mentor-card, .faq__item, .form-card, .newsletter, .quote, .account__card, .jobcard, .auth__card, .qa__panel, .chatbot__panel {
  box-shadow: var(--sh-soft);
  border-color: var(--line);
}
.card:hover, .step:hover, .mentor-card:hover, .quote:hover, .jobcard:hover { box-shadow: var(--sh-card); border-color: var(--green-mint-border); }
.card__icon { background: var(--green-mint) !important; color: var(--green) !important; }
.grid--3 .card:nth-child(2) .card__icon, .grid--4 .card:nth-child(2) .card__icon { background: #e1f1f3 !important; color: var(--hub-jobs) !important; }
.grid--3 .card:nth-child(3) .card__icon, .grid--4 .card:nth-child(3) .card__icon { background: var(--orange-soft) !important; color: var(--orange-dark) !important; }
.grid--4 .card:nth-child(4) .card__icon { background: #ece8f8 !important; color: var(--hub-learn) !important; }
.step:nth-child(2) .step__num { background: var(--orange) !important; color: var(--green-deep) !important; }
.step:nth-child(3) .step__num { background: var(--hub-jobs) !important; }
.mentor-card::after { background: linear-gradient(90deg, var(--orange), var(--green-soft)); }
.avatar, .drow__avatar { background: var(--green-mint); color: var(--green); }
.chip { background: var(--green-mint); color: var(--green); }
.chip--orange { background: var(--orange-soft); color: var(--orange-dark); }
.chip--teal { background: #e1f1f3; color: var(--hub-jobs); }
.chip--violet { background: #ece8f8; color: var(--hub-learn); }
.badge { background: var(--green-mint); color: var(--green); }

/* Hub tabs + panels take their hub colour */
.tabs { background: var(--card); }
.tab:nth-child(1)[aria-selected="true"] { background: var(--hub-connect) !important; }
.tab:nth-child(2)[aria-selected="true"] { background: var(--hub-jobs) !important; }
.tab:nth-child(3)[aria-selected="true"] { background: var(--hub-learn) !important; }
.tab:nth-child(4)[aria-selected="true"] { background: var(--hub-enterprise) !important; }
#panel-jobs .panel__copy h3 span, #panel-jobs .feature-list svg, #panel-jobs .panel__badge { color: var(--hub-jobs); }
#panel-learn .panel__copy h3 span, #panel-learn .feature-list svg, #panel-learn .panel__badge { color: var(--hub-learn); }
#panel-enterprise .panel__copy h3 span, #panel-enterprise .feature-list svg, #panel-enterprise .panel__badge { color: var(--hub-enterprise); }
#panel-jobs .btn { --btn-bg: var(--hub-jobs); }
#panel-learn .btn { --btn-bg: var(--hub-learn); }
#panel-enterprise .btn { --btn-bg: var(--hub-enterprise); }
.panel__media { border: 0; box-shadow: var(--sh-card); }

/* Sections: mint + deep-green gradients */
.section--mint { background: linear-gradient(180deg, var(--green-mint) 0%, var(--cream) 100%); }
.section--deep {
  background: radial-gradient(1000px 500px at 5% 0%, rgba(46, 125, 82, 0.6), transparent 60%),
    radial-gradient(800px 500px at 100% 100%, rgba(243, 154, 31, 0.3), transparent 60%), var(--green-deep);
  color: rgba(255, 255, 255, 0.82); border: 0;
}
.section--deep h2, .section--deep h3 { color: var(--white); }
.section--deep .lead { color: rgba(255, 255, 255, 0.8); }
.section--deep .eyebrow { color: var(--orange); }
.stat { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); }
.stat:hover { background: rgba(255, 255, 255, 0.12); }
.stat__num { color: var(--white); }
.stat__label { color: rgba(255, 255, 255, 0.72); }
.download {
  background: radial-gradient(900px 500px at 0% 0%, rgba(46, 125, 82, 0.85), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(243, 154, 31, 0.55), transparent 60%), var(--green-dark);
  box-shadow: 0 18px 50px rgba(27, 94, 58, 0.22);
}
.download .eyebrow { color: var(--orange) !important; }
.mock-hero { background: linear-gradient(140deg, var(--green-soft), var(--green-dark)); }
.footer { background: var(--green-deep); color: rgba(255, 255, 255, 0.7); border-top: 0; }
.footer h4, .footer a:hover, .wordmark--light .rest { color: var(--white); }
.footer__bottom { border-top-color: rgba(255, 255, 255, 0.1); }
.footer__bottom .heart { color: var(--orange); }
.social a { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); color: var(--white); }
.social a:hover { background: var(--orange); color: var(--green-deep); }
.footer::before { display: block !important; }
.msg--bot, .qa__panel, .chatbot__panel { background: var(--card); }
.qa__a p { background: var(--green-mint); border-color: var(--green-mint-border); }

/* --------------------------------------------------------------------------
   App shell (signed in): coloured hub headers, greeting banner, tiles,
   mobile bottom tab bar like the app.
   -------------------------------------------------------------------------- */
.hub__head { position: relative; padding: 26px 28px; border-radius: var(--r-xl); color: var(--white); overflow: hidden; margin-bottom: 22px;
  background: linear-gradient(135deg, var(--hub-from, var(--green)), var(--hub-to, var(--green-soft))); box-shadow: var(--sh-card); }
.hub__head::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.hub__head .eyebrow { color: rgba(255, 255, 255, 0.85); }
.hub__head .eyebrow::before { background: var(--orange); }
.hub__head .hub__title { color: var(--white); }
.hub__head .auth__sub { color: rgba(255, 255, 255, 0.85); margin: 0; }
.hub--jobs .hub__head { --hub-from: #0c5e6b; --hub-to: #1b9aaa; }
.hub--learn .hub__head { --hub-from: #3d2e7c; --hub-to: #5c49b8; }
.hub--community .hub__head { --hub-from: #1b5e3a; --hub-to: #2e7d52; }
.hub--enterprise .hub__head { --hub-from: #b5650a; --hub-to: #f39a1f; }

.greet { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 28px; border-radius: var(--r-xl); color: var(--white);
  background: radial-gradient(600px 300px at 100% 0%, rgba(243, 154, 31, 0.45), transparent 60%), linear-gradient(135deg, var(--green-dark), var(--green-soft)); box-shadow: var(--sh-card); margin-bottom: 18px; }
.greet h1 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--white); margin: 2px 0 4px; }
.greet p { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 0.92rem; }
.greet__avatar { width: 56px; height: 56px; border-radius: 18px; background: var(--orange); color: var(--green-deep); font-weight: 700; font-size: 1.2rem; display: grid; place-items: center; flex-shrink: 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.tile { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-soft); color: var(--ink); transition: transform 0.3s var(--ease-out), box-shadow 0.3s; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--sh-card); }
.tile__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--tile-tint, var(--green-mint)); color: var(--tile-color, var(--green)); }
.tile__icon svg { width: 20px; height: 20px; }
.tile strong { font-size: 0.95rem; }
.tile small { color: var(--muted); font-size: 0.78rem; }
.tile--connect { --tile-tint: #e6f2ea; --tile-color: #1b5e3a; }
.tile--jobs { --tile-tint: #e1f1f3; --tile-color: #0c5e6b; }
.tile--learn { --tile-tint: #ece8f8; --tile-color: #3d2e7c; }
.tile--enterprise { --tile-tint: #fdebcf; --tile-color: #b5650a; }
.tile--community { --tile-tint: #e6f2ea; --tile-color: #2e7d52; }
.dash__card { border-top: 3px solid var(--green-mint-border); }
.dash__col .dash__card:nth-child(2) { border-top-color: #f8dcb0; }

/* Bottom tab bar (mobile, signed in) */
.tabbar-mobile { display: none; }
@media (max-width: 900px) {
  body.is-app .tabbar-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 140; display: flex; justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .tabbar-mobile a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 8px; border-radius: 12px; font-size: 0.66rem; font-weight: 600; color: var(--muted); min-width: 56px; }
  .tabbar-mobile a svg { width: 22px; height: 22px; }
  .tabbar-mobile a.is-active { color: var(--green); background: var(--green-mint); }
  body.is-app { padding-bottom: 72px; }
  body.is-app .chatbot { bottom: 82px; }
  body.is-app .to-top { bottom: 144px; }
}

/* Ghost buttons stay transparent under the brand theme */
.btn--ghost, .btn--ghost-light { --btn-bg: transparent; }
.btn--white { --btn-bg: var(--white); --btn-fg: var(--green); }

/* --------------------------------------------------------------------------
   Dashboard v2: paired grid, icon cards, stats strip, empty states
   -------------------------------------------------------------------------- */
.dash__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.dstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.dstat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-soft); }
.dstat strong { display: block; font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--ink); }
.dstat small { color: var(--muted); font-size: 0.78rem; }
.dstat__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.dstat__icon svg { width: 20px; height: 20px; }
.dstat--green .dstat__icon { background: var(--green-mint); color: var(--green); }
.dstat--orange .dstat__icon { background: var(--orange-soft); color: var(--orange-dark); }
.dstat--teal .dstat__icon { background: #e1f1f3; color: var(--hub-jobs); }
.dstat--violet .dstat__icon { background: #ece8f8; color: var(--hub-learn); }
.dcard { padding: 0; border-top: 0 !important; overflow: hidden; display: flex; flex-direction: column; }
.dcard__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--grey-bg); }
.dcard__titles { flex: 1; min-width: 0; }
.dcard__icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; }
.dcard__icon svg { width: 18px; height: 18px; }
.dcard--green .dcard__icon { background: var(--green-mint); color: var(--green); }
.dcard--orange .dcard__icon { background: var(--orange-soft); color: var(--orange-dark); }
.dcard--teal .dcard__icon { background: #e1f1f3; color: var(--hub-jobs); }
.dcard--violet .dcard__icon { background: #ece8f8; color: var(--hub-learn); }
.dcard__count { min-width: 28px; height: 28px; padding: 0 9px; border-radius: 999px; display: grid; place-items: center; font-weight: 700; font-size: 0.8rem; background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.dcard__body { padding: 4px 18px 14px; flex: 1; }
.dcard__body .dash__form { padding-top: 12px; }
.dcard .drow:first-child { padding-top: 12px; border-top: 0; }
.dash__empty { text-align: center; padding: 26px 12px 18px; display: grid; gap: 8px; justify-items: center; }
.dash__empty p { margin: 0; font-size: 0.88rem; max-width: 32ch; }
.dash__empty-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--grey-bg); color: var(--muted); display: grid; place-items: center; }
.dash__empty-icon svg { width: 20px; height: 20px; }
@media (max-width: 900px) { .dash__grid { grid-template-columns: 1fr; } .dstats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .dstat { padding: 10px 12px; } .dstat strong { font-size: 1.2rem; } }


/* ==========================================================================
   THEME: Restrained - one green, near-black, neutral greys. Flat surfaces,
   no gradients, no per-section pastel tints. Orange lives only in the wordmark.
   ========================================================================== */
:root {
  --green: #1f5f3b;
  --green-dark: #17452c;
  --green-deep: #12321f;
  --green-soft: #2f7350;
  --green-mint: #e9efe9;
  --green-mint-border: #d6ded6;
  --orange: #f39a1f;
  --orange-dark: #d9820a;
  --orange-soft: #e9efe9;
  --cream: #f5f6f4;
  --card: #ffffff;
  --ink: #141a16;
  --ink-soft: #4a544e;
  --muted: #7a847d;
  --line: #e2e6e2;
  --grey-bg: #f0f2ef;
  --grey-tint: #eceeeb;
  --sh-soft: 0 1px 2px rgba(20, 26, 22, 0.05);
  --sh-card: 0 6px 18px rgba(20, 26, 22, 0.07);
  --sh-raised: 0 10px 28px rgba(20, 26, 22, 0.12);
}
body { background: var(--cream); }
.wordmark .wi { color: var(--orange); }
.eyebrow { color: var(--muted); }
.eyebrow::before { background: var(--green); }
.blob, .hero__grid, .footer::before, .hub__head::after { display: none !important; }
.hero h1 .accent::after { display: none; }
.hero__photo { transform: none !important; box-shadow: var(--sh-card); }
.nav__links a::after { background: var(--green); }

/* Buttons: green primary, black secondary-primary, quiet ghosts */
.btn { --btn-bg: var(--green); --btn-fg: var(--white); }
.btn:hover { box-shadow: none; transform: translateY(-1px); }
.btn::after { display: none !important; }
.btn--orange, .btn--orange:hover { --btn-bg: var(--ink); --btn-fg: var(--white); box-shadow: none; }
.btn--ghost, .btn--ghost-light { --btn-bg: transparent; --btn-fg: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost:hover, .btn--ghost-light:hover { background: var(--grey-tint); box-shadow: inset 0 0 0 1px #cfd5cf; }
.nav__avatar, .step__num, .filter.is-active, .tab[aria-selected="true"], .qa__q.is-active .qa__bubble, .msg--user, .to-top, .chatbot__fab, .tabbar__tab.is-on, .faq__item.is-open .faq__q span.plus, .legal ol.numbered li::before, .account__avatar,
.step:nth-child(2) .step__num, .step:nth-child(3) .step__num, .tab:nth-child(1)[aria-selected="true"], .tab:nth-child(2)[aria-selected="true"], .tab:nth-child(3)[aria-selected="true"], .tab:nth-child(4)[aria-selected="true"] { background: var(--ink) !important; color: var(--white) !important; }
.chatbot__fab:hover, .to-top:hover { background: var(--green) !important; color: var(--white) !important; }
.chatbot__avatar { background: var(--ink); color: var(--white); }
.filter.is-active { border-color: var(--ink); }
.qa__q.is-active .qa__bubble { border-color: var(--ink); }

/* One neutral tint for every icon, avatar and chip */
.card__icon, .tile__icon, .dstat__icon, .dcard__icon, .avatar, .drow__avatar, .role__icon, .verify__icon, .form-success__icon, .float-card__icon, .dash__empty-icon,
.grid--3 .card:nth-child(2) .card__icon, .grid--3 .card:nth-child(3) .card__icon, .grid--4 .card:nth-child(2) .card__icon, .grid--4 .card:nth-child(3) .card__icon, .grid--4 .card:nth-child(4) .card__icon,
.dstat--green .dstat__icon, .dstat--orange .dstat__icon, .dstat--teal .dstat__icon, .dstat--violet .dstat__icon,
.dcard--green .dcard__icon, .dcard--orange .dcard__icon, .dcard--teal .dcard__icon, .dcard--violet .dcard__icon,
.tile--connect .tile__icon, .tile--jobs .tile__icon, .tile--learn .tile__icon, .tile--enterprise .tile__icon, .tile--community .tile__icon { background: var(--grey-tint) !important; color: var(--ink) !important; }
.chip, .chip--orange, .chip--teal, .chip--violet { background: var(--grey-tint); color: var(--ink-soft); border-color: transparent; }
.chip--outline { background: transparent; border-color: var(--line); }
.badge { background: var(--green-mint); color: var(--green); }
.mentor-card::after { background: var(--green); }
#panel-jobs .panel__copy h3 span, #panel-learn .panel__copy h3 span, #panel-enterprise .panel__copy h3 span, .panel__copy h3 span, .hero h1 .accent, .hero--dark h1 .accent { color: var(--green); }
#panel-jobs .feature-list svg, #panel-learn .feature-list svg, #panel-enterprise .feature-list svg, .feature-list svg { color: var(--green); }
#panel-jobs .btn, #panel-learn .btn, #panel-enterprise .btn { --btn-bg: var(--green); }
#panel-jobs .panel__badge, #panel-learn .panel__badge, #panel-enterprise .panel__badge { color: var(--ink); }

/* Flat surfaces */
.card, .step, .mentor-card, .faq__item, .form-card, .newsletter, .quote, .account__card, .jobcard, .auth__card, .qa__panel, .chatbot__panel, .tile, .dstat { box-shadow: var(--sh-soft); border-color: var(--line); }
.card:hover, .step:hover, .mentor-card:hover, .quote:hover, .jobcard:hover, .tile:hover { box-shadow: var(--sh-card); border-color: #cfd5cf; }
.section--mint { background: var(--grey-bg); }
.section--deep { background: var(--green-deep); color: rgba(255, 255, 255, 0.82); }
.section--deep .eyebrow { color: rgba(255, 255, 255, 0.6); }
.stat { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); }
.stat__num .suffix { color: var(--white); }
.download { background: var(--green-deep); box-shadow: none; }
.download .eyebrow { color: rgba(255, 255, 255, 0.6) !important; }
.mock-hero { background: var(--green); }
.footer { background: var(--green-deep); }
.footer__bottom .heart { color: var(--white); }
.social a:hover { background: var(--white); color: var(--green-deep); }
.qa__a p { background: var(--grey-bg); border-color: var(--line); }
.dcard__head { background: var(--card); }
.dcard__count { background: var(--grey-tint); border-color: transparent; }

/* App shell: flat green banner, plain white hub headers */
.greet { background: var(--green-dark); box-shadow: none; }
.greet .eyebrow { color: rgba(255, 255, 255, 0.6) !important; }
.greet__avatar { background: var(--white); color: var(--green-dark); }
.hub__head, .hub--jobs .hub__head, .hub--learn .hub__head, .hub--community .hub__head, .hub--enterprise .hub__head {
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--green); box-shadow: var(--sh-soft);
}
.hub__head .eyebrow { color: var(--muted); }
.hub__head .hub__title { color: var(--ink); }
.hub__head .auth__sub { color: var(--ink-soft); }
.tabbar-mobile a.is-active { color: var(--ink); background: var(--grey-tint); }
.learn__bar span, .ledger__seg[data-tone="c"] { background: var(--green); }

/* --------------------------------------------------------------------------
   Loaders: route transition overlay + content skeletons
   -------------------------------------------------------------------------- */
.route-loader { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(245, 246, 244, 0.72); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s 0.2s; }
body.is-routing .route-loader { opacity: 1; visibility: visible; transition: opacity 0.15s, visibility 0s; }
.route-loader__bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; background: rgba(31, 95, 59, 0.15); }
.route-loader__bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: var(--green); animation: routebar 1s ease-in-out infinite; }
@keyframes routebar { 0% { left: -40%; } 100% { left: 100%; } }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--green); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner--sm { width: 18px; height: 18px; border-width: 2px; }
.loader { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 34px 0; color: var(--muted); font-size: 0.88rem; }
.loader--inline { flex-direction: row; justify-content: center; padding: 18px 0; }
.sk-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); padding: 18px; display: grid; gap: 10px; }
.sk-row { display: flex; gap: 12px; align-items: center; padding: 12px 0; }
.sk { background: linear-gradient(90deg, #eceeeb 25%, #f6f7f5 50%, #eceeeb 75%); background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: 8px; height: 12px; }
.sk--avatar { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; }
.sk--title { height: 14px; width: 55%; }
.sk--line { width: 85%; }
.sk--short { width: 40%; }
.sk--btn { height: 32px; width: 84px; border-radius: 999px; margin-left: auto; }
.dash__loading { display: grid; gap: 16px; }
.sk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .sk-grid { grid-template-columns: 1fr; } }


/* Connect page: directory-first layout */
.connect { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
.connect__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.mlist { display: grid; gap: 10px; }
.mcard { display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
.mcard:hover { border-color: #cfd5cf; box-shadow: var(--sh-card); }
.mcard__avatar { position: relative; width: 56px; height: 56px; border-radius: 16px; background: var(--grey-tint); color: var(--ink); display: grid; place-items: center; font-weight: 700; flex-shrink: 0; overflow: hidden; }
.mcard__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mcard__avatar--lg { width: 72px; height: 72px; border-radius: 20px; font-size: 1.2rem; }
.mcard__body { flex: 1; min-width: 0; }
.mcard__body strong { display: block; font-size: 1rem; color: var(--ink); }
.mcard__chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 8px; }
.mcard__chips .chip { padding: 4px 10px; font-size: 0.72rem; }
.mcard__body p { margin: 0; font-size: 0.88rem; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mcard__action { flex-shrink: 0; align-self: center; }
.dcard--wide { grid-column: 1 / -1; }
@media (max-width: 900px) { .connect { grid-template-columns: 1fr; } .connect__side { order: -1; } }

.dash__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.dash__bar-title { font-size: 1.5rem; }


/* Discover (app Home tab) */
.discover { margin-bottom: 22px; }
.discover__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dtile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 18px; min-height: 132px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-soft); transition: transform 0.25s var(--ease-out), box-shadow 0.25s, border-color 0.25s; }
.dtile:hover { transform: translateY(-2px); box-shadow: var(--sh-card); border-color: #cfd5cf; }
.dtile--wide { grid-column: span 2; }
.dtile__emoji { font-size: 1.5rem; line-height: 1; margin-bottom: 8px; }
.dtile strong { font-size: 1.05rem; color: var(--ink); }
.dtile small { color: var(--ink-soft); font-size: 0.82rem; line-height: 1.4; }
.discover__options { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.doption { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); font-weight: 600; color: var(--ink); transition: border-color 0.2s, transform 0.2s; }
.doption:hover { border-color: var(--ink); transform: translateY(-1px); }
.doption svg { width: 18px; height: 18px; color: var(--muted); }
@media (max-width: 900px) { .discover__grid { grid-template-columns: 1fr 1fr; } }


/* ==========================================================================
   Dashboard — app parity (MenteesScreen / MySessionsScreen).
   Loaded last so it sits on top of the Restrained theme above.
   ========================================================================== */

/* Role tag — says which side of the relationship someone is on. */
.rtag { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 9px; border-radius: var(--r-pill);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.7; white-space: nowrap; vertical-align: middle; }
.rtag--mentor { background: var(--green-mint); color: var(--green); box-shadow: inset 0 0 0 1px var(--green-mint-border); }
.rtag--mentee { background: var(--grey-tint); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line); }
.rtag--light { background: rgba(255, 255, 255, 0.16); color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.nav__chip .rtag { margin-left: 6px; }
.dash__bar-title .rtag { position: relative; top: -2px; }

/* Hub header — the app's CollapsibleHeader. */
.dhero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px;
  padding: 24px 26px; margin-bottom: 16px; border-radius: var(--r-xl); background: var(--green-dark); color: var(--white); }
.dhero__eyebrow { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
.dhero__title { font-size: clamp(1.35rem, 2.4vw, 1.75rem); color: var(--white); margin: 5px 0 4px; }
.dhero__sub { margin: 0; font-size: 0.92rem; line-height: 1.5; color: rgba(255, 255, 255, 0.78); max-width: 46ch; }
.dhero__stats { display: flex; gap: 10px; }
.dhstat { min-width: 92px; padding: 12px 16px; border-radius: var(--r-md); text-align: center;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); }
.dhstat strong { display: block; font-family: var(--font-display); font-size: 1.55rem; line-height: 1; color: var(--white); }
.dhstat small { display: block; margin-top: 4px; font-size: 0.72rem; color: rgba(255, 255, 255, 0.75); }

/* Segmented control — one list at a time. */
.dseg { display: inline-flex; gap: 4px; max-width: 100%; overflow-x: auto; padding: 4px; margin-bottom: 16px;
  border-radius: var(--r-pill); background: var(--grey-tint); border: 1px solid var(--line); scrollbar-width: none; }
.dseg::-webkit-scrollbar { display: none; }
.dseg__btn { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 9px 18px; border: 0; cursor: pointer;
  border-radius: var(--r-pill); background: transparent; color: var(--muted); font-family: inherit; font-size: 0.86rem; font-weight: 600;
  transition: background 0.2s, color 0.2s; }
.dseg__btn:hover { color: var(--ink); }
.dseg__btn.is-on { background: var(--card); color: var(--ink); box-shadow: var(--sh-soft); }
.dseg__n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--grey-bg); color: var(--ink-soft); font-size: 0.7rem; font-weight: 700; }
.dseg__btn.is-on .dseg__n { background: var(--green); color: var(--white); }
.dseg--sm { margin-bottom: 12px; }
.dseg--sm .dseg__btn { padding: 7px 15px; font-size: 0.8rem; }

/* Request card — avatar + role tag, goal pill, the message they wrote. */
.reqgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; margin-bottom: 16px; }
.reqcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--sh-soft); }
.reqcard__top { display: flex; align-items: center; gap: 12px; }
.reqcard__who { flex: 1; min-width: 0; }
.reqcard__who strong { display: flex; align-items: center; flex-wrap: wrap; font-size: 0.98rem; color: var(--ink); }
.reqcard__who small { display: block; margin-top: 3px; font-size: 0.78rem; color: var(--muted); }
.reqcard__msg { margin: 10px 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); font-style: italic; }
.reqcard__actions { display: flex; gap: 10px; margin-top: 16px; }
.reqcard__actions .btn { flex: 1; justify-content: center; }
.goalpill { display: inline-block; margin-top: 14px; padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--green-mint); color: var(--green); font-size: 0.74rem; font-weight: 600; }
.goalpill--sm { margin-top: 6px; padding: 3px 10px; font-size: 0.68rem; }

/* List card + rows */
.dlist { padding: 6px 18px; margin-bottom: 16px; }
.dlist__foot { padding: 12px 0 8px; border-top: 1px solid var(--line); }
.drow__name { display: flex; align-items: center; flex-wrap: wrap; }
.drow__preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46ch; }
.dcount { font-size: 0.74rem; color: var(--muted); white-space: nowrap; }

/* Session state tags */
.livetag { margin-left: 8px; padding: 3px 9px; border-radius: var(--r-pill); background: var(--danger); color: var(--white);
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; }
.stag { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 0.68rem; font-weight: 600; }
.stag svg { width: 11px; height: 11px; }
.stag--pub { background: var(--green-mint); color: var(--green); }
.stag--priv { background: var(--grey-tint); color: var(--muted); }

/* "Their goal" card at the top of a mentor's chat (MenteeDetailScreen). */
.goalcard { padding: 14px 16px; margin-bottom: 12px; border-radius: var(--r-md); background: var(--green-mint); }
.goalcard__label { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }
.goalcard strong { display: block; margin-top: 5px; font-size: 0.95rem; color: var(--ink); }
.goalcard p { margin: 6px 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); font-style: italic; }
.modal__panel--chat #chatName { display: flex; align-items: center; }

/* Collapsible host-a-session form */
.dash__form--boxed { padding: 16px; margin: 12px 0 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--grey-bg); }

@media (max-width: 720px) {
  .dhero { flex-direction: column; align-items: stretch; padding: 20px; }
  .dhero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .dhstat { min-width: 0; padding: 10px 8px; }
  .dhstat strong { font-size: 1.25rem; }
  .reqgrid { grid-template-columns: 1fr; }
  .drow__preview { max-width: 24ch; }
  .dcount { display: none; }
}

/* Host a session: public vs one-on-one, and the share link */
.vispick { display: grid; gap: 8px; }
.vispick__opt { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; cursor: pointer;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md); transition: border-color 0.2s, background 0.2s; }
.vispick__opt:hover { border-color: #cfd5cf; }
.vispick__opt input { margin-top: 3px; accent-color: var(--green); flex-shrink: 0; }
.vispick__opt strong { display: block; font-size: 0.9rem; color: var(--ink); }
.vispick__opt small { display: block; margin-top: 2px; font-size: 0.78rem; line-height: 1.45; color: var(--muted); }
.vispick__opt:has(input:checked) { border-color: var(--green); background: var(--green-mint); }
.vispick__opt:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }

.sharebar { padding: 14px 16px; margin: 12px 0 16px; border-radius: var(--r-md);
  background: var(--green-mint); border: 1px solid var(--green-mint-border); }
.sharebar__head { display: flex; align-items: flex-start; gap: 10px; }
.sharebar__head svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--green); }
.sharebar__head strong { display: block; font-size: 0.92rem; color: var(--ink); }
.sharebar__head small { display: block; margin-top: 2px; font-size: 0.8rem; line-height: 1.45; color: var(--ink-soft); }
.sharebar__row { display: flex; gap: 8px; margin-top: 12px; }
.sharebar__row input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink-soft); font-family: inherit; font-size: 0.82rem; }
.sharebar__row .btn { flex-shrink: 0; }

.stags { display: flex; flex-wrap: wrap; gap: 6px; }
.stags .stag { margin-top: 7px; }
[data-open-session] { cursor: pointer; }
@media (max-width: 560px) { .sharebar__row { flex-direction: column; } }


/* ==========================================================================
   SURFACE: airy card canvas, pill tab bar, warm iOS-style buttons.
   Light off-white ground, generous radii, one dark anchor per view, and a
   warm amber glow on anything primary. Appended last so it wins.
   ========================================================================== */
:root {
  --amber: #f39a1f;
  --amber-lift: #f9ae42;
  --amber-deep: #d9820a;
  --amber-tint: #fdf3e4;
  --hair: rgba(20, 26, 22, 0.07);
  --lift-1: 0 1px 2px rgba(20, 26, 22, 0.04);
  --lift-2: 0 14px 34px rgba(20, 26, 22, 0.09);
  --glow: 0 6px 20px rgba(217, 130, 10, 0.3);
  --glow-lg: 0 12px 34px rgba(217, 130, 10, 0.36);
}

/* --- Buttons: capsule, warm gradient, glow, iOS press --- */
.btn { transition: transform 0.22s var(--ease-out), box-shadow 0.3s var(--ease-out), background 0.25s, color 0.25s; }
.btn--orange, .btn--orange:hover {
  --btn-fg: var(--white);
  background: linear-gradient(180deg, var(--amber-lift) 0%, var(--amber) 52%, var(--amber-deep) 100%);
  color: var(--white);
  letter-spacing: -0.01em;
  box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
.btn--orange:hover { transform: translateY(-1px); box-shadow: var(--glow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.44); }
.btn--orange:active { transform: scale(0.97); box-shadow: 0 3px 10px rgba(217, 130, 10, 0.28); }
.btn--ghost, .btn--ghost-light { --btn-fg: var(--ink); background: var(--grey-tint); box-shadow: inset 0 0 0 1px var(--hair); }
.btn--ghost:hover, .btn--ghost-light:hover { background: #e4e7e3; box-shadow: inset 0 0 0 1px rgba(20, 26, 22, 0.12); transform: translateY(-1px); }
.btn--ghost:active, .btn--ghost-light:active { transform: scale(0.97); }
.btn[disabled] { transform: none !important; box-shadow: none !important; }

/* --- Tab bar: light capsule shell, dark active pill --- */
.dseg { gap: 2px; padding: 6px; border-radius: 18px; background: var(--card); border: 1px solid var(--hair);
  box-shadow: var(--lift-1), 0 8px 24px rgba(20, 26, 22, 0.05); margin-bottom: 20px; }
.dseg__btn { padding: 11px 24px; border-radius: 12px; font-size: 0.9rem; letter-spacing: -0.01em; color: #6f7a72;
  transition: background 0.22s, color 0.22s, box-shadow 0.25s; }
.dseg__btn:hover { color: var(--ink); background: rgba(20, 26, 22, 0.04); }
.dseg__btn.is-on { background: var(--green-deep); color: var(--white); box-shadow: 0 2px 10px rgba(18, 50, 31, 0.28); }
.dseg__n { background: rgba(20, 26, 22, 0.06); color: #6f7a72; }
.dseg__btn.is-on .dseg__n { background: rgba(255, 255, 255, 0.22); color: var(--white); }
.dseg--sm { border-radius: 15px; }
.dseg--sm .dseg__btn { padding: 8px 17px; border-radius: 10px; }

/* --- The one dark anchor, with the warm glow bleeding in --- */
.dhero { position: relative; overflow: hidden; border-radius: 26px; padding: 30px 32px; }
.dhero::before { content: ""; position: absolute; right: -70px; top: -110px; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 154, 31, 0.38), transparent 66%); pointer-events: none; }
.dhero > * { position: relative; }
.dhero__title { letter-spacing: -0.02em; }
.dhstat { border-radius: 16px; background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.14); }

/* --- Cards: quiet by default, lift + warm edge on hover --- */
.account__card, .reqcard { border-radius: 20px; border-color: var(--hair); box-shadow: var(--lift-1); }
.reqcard { padding: 24px; transition: transform 0.35s var(--ease-out), box-shadow 0.35s, border-color 0.3s; }
.reqcard:hover { transform: translateY(-3px); box-shadow: var(--lift-2); border-color: rgba(243, 154, 31, 0.38); }
.reqcard__eyebrow { display: block; margin-bottom: 14px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--green); }
.reqcard__who strong { font-size: 1.06rem; letter-spacing: -0.015em; }
.reqcard__actions { margin-top: 18px; }
.dtile { border-radius: 20px; padding: 22px; border-color: var(--hair); box-shadow: var(--lift-1); }
.dtile:hover { transform: translateY(-3px); box-shadow: var(--lift-2); border-color: rgba(243, 154, 31, 0.32); }
.dlist { padding: 8px 22px; }
.dlist .drow { padding: 15px 0; }
.dcard__head { padding: 18px 22px; }
.dcard__body { padding: 6px 22px 16px; }

/* --- Pickers and inputs pick up the same warm accent --- */
.vispick__opt { border-radius: 14px; border-color: var(--hair); }
.vispick__opt input { accent-color: var(--amber); }
.vispick__opt:has(input:checked) { border-color: var(--amber); background: var(--amber-tint);
  box-shadow: 0 0 0 3px rgba(243, 154, 31, 0.13); }
.sharebar { border-radius: 16px; }
.sharebar__row input { border-radius: 11px; }
.goalpill { background: var(--amber-tint); color: var(--amber-deep); }

/* The glow from the reference search bar — on focus, where it means something. */
.search input { border-radius: var(--r-pill); transition: box-shadow 0.35s var(--ease-out), border-color 0.3s; }
.search input:focus { border-color: rgba(243, 154, 31, 0.5);
  box-shadow: 0 0 0 4px rgba(243, 154, 31, 0.14), 0 10px 30px rgba(217, 130, 10, 0.18); }

.account { background: linear-gradient(180deg, #fbfaf7 0%, var(--cream) 46%); }
@media (max-width: 720px) { .dhero { padding: 22px 20px; } .dseg__btn { padding: 10px 16px; } }

/* Signed in, the header carries only the wordmark and the account chip — the
   hub links are gone. On phones the bottom tab bar still does the navigating;
   the burger drops the same links so the two never disagree. */
body.is-app .nav__links,
body.is-app .mobile-menu ul { display: none; }

/* Two columns on the dashboard: mentorship on the left, sessions beside it. */
.dash__two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dash__main, .dash__aside { min-width: 0; }
.dash__aside .account__card { margin-bottom: 0; }
.dash__two .reqgrid { grid-template-columns: 1fr; }
@media (max-width: 1000px) { .dash__two { grid-template-columns: 1fr; } }

/* ==========================================================================
   Fit the dashboard in one screen: one compact header, then two columns that
   scroll inside themselves rather than pushing the page down.
   ========================================================================== */
.dhero { align-items: center; padding: 20px 26px; margin-bottom: 16px; }
.dhero__copy { min-width: 0; }
.dhero__title { font-size: clamp(1.25rem, 2.1vw, 1.6rem); margin: 3px 0 3px; }
.dhero__sub { font-size: 0.86rem; }
.dhero__side { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.dhero__stats { gap: 8px; }
.dhstat { min-width: 76px; padding: 9px 12px; border-radius: 14px; }
.dhstat strong { font-size: 1.3rem; }
.dhstat small { margin-top: 2px; font-size: 0.68rem; }
.dhero .btn--ghost { background: rgba(255, 255, 255, 0.14); color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); }
.dhero .btn--ghost:hover { background: rgba(255, 255, 255, 0.22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34); }

body.is-app .account { padding: calc(var(--nav-h) + 16px) 0 16px; }
.dash__main, .dash__aside { max-height: calc(100dvh - var(--nav-h) - 190px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.dash__main::-webkit-scrollbar, .dash__aside::-webkit-scrollbar { width: 6px; }
.dash__main::-webkit-scrollbar-thumb, .dash__aside::-webkit-scrollbar-thumb { background: rgba(20, 26, 22, 0.15); border-radius: 3px; }
.dash__main, .dash__aside { scrollbar-width: thin; scrollbar-color: rgba(20, 26, 22, 0.15) transparent; }

/* Tighter innards so more lands above the fold */
.dseg { margin-bottom: 14px; padding: 5px; }
.dseg__btn { padding: 10px 20px; }
.dseg--sm .dseg__btn { padding: 7px 15px; }
.reqcard { padding: 20px; }
.reqcard__eyebrow { margin-bottom: 10px; }
.reqcard__actions { margin-top: 14px; }
.goalpill { margin-top: 12px; }
.reqgrid, .dlist { margin-bottom: 14px; }
.dcard__head { padding: 14px 18px; flex-wrap: wrap; }
.dcard__body { padding: 4px 18px 14px; }
.dash__empty { padding: 20px 12px 14px; }
.dash__empty-icon { width: 38px; height: 38px; }
.dlist { padding: 6px 18px; }
.dlist .drow { padding: 13px 0; }

@media (max-width: 1000px) { .dash__main, .dash__aside { max-height: none; overflow: visible; padding-right: 0; } }
@media (max-width: 720px) { .dhero { flex-direction: column; align-items: stretch; } .dhero__side { flex-direction: column; align-items: stretch; } }

/* Mentees also carry the Discover tracks above the columns — keep them tight. */
.discover { margin-bottom: 14px; }
.dtile { min-height: 106px; padding: 18px; }
.dtile__emoji { font-size: 1.3rem; margin-bottom: 6px; }
.dtile strong { font-size: 0.98rem; }
.dtile small { font-size: 0.78rem; }


/* ==========================================================================
   PALETTE: white cards on light grey, near-black for anything primary, one
   blue accent. No orange anywhere. Redefines the brand tokens rather than
   restating every rule, so the whole site follows.
   ========================================================================== */
:root {
  --blue: #2f6bed;
  --blue-deep: #1d51c4;
  --blue-tint: #eaf1fe;
  --blue-line: #d3e2fd;

  --green: var(--blue);
  --green-dark: #1f242c;
  --green-deep: #14171c;
  --green-soft: #5b8bf0;
  --green-mint: var(--blue-tint);
  --green-mint-border: var(--blue-line);

  /* The "primary button" token — black, not orange. */
  --orange: #14171c;
  --orange-dark: #000000;
  --orange-soft: #eef0f3;

  --cream: #f4f5f7;
  --card: #ffffff;
  --ink: #14171c;
  --ink-soft: #464c56;
  --muted: #838b98;
  --line: #e8eaef;
  --grey-bg: #f4f5f7;
  --grey-tint: #eef0f3;
  --hair: var(--line);
  --lift-1: 0 1px 2px rgba(20, 23, 28, 0.05);
  --lift-2: 0 10px 28px rgba(20, 23, 28, 0.08);
}
body { background: var(--cream); }
.wordmark .wi { color: var(--blue); }
.account, body.is-app .account { background: var(--cream); }

/* --- Buttons: black primary, white outline secondary --- */
.btn--orange, .btn--orange:hover {
  background: var(--ink); color: var(--white);
  box-shadow: 0 2px 8px rgba(20, 23, 28, 0.16);
}
.btn--orange:hover { background: #000; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(20, 23, 28, 0.22); }
.btn--orange:active { transform: scale(0.97); box-shadow: 0 2px 6px rgba(20, 23, 28, 0.18); }
.btn--ghost, .btn--ghost-light { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost:hover, .btn--ghost-light:hover { background: var(--grey-bg); box-shadow: inset 0 0 0 1px #d6dae1; }

/* --- Greeting row + search --- */
.dtop { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.dtop__copy { min-width: 0; }
.dtop__title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0;
  font-size: clamp(1.35rem, 2.3vw, 1.7rem); letter-spacing: -0.02em; color: var(--ink); }
.dtop__sub { margin: 5px 0 0; font-size: 0.9rem; color: var(--muted); }
.wave { margin-left: 4px; }
.dtop__side { display: flex; align-items: center; gap: 10px; }
.dsearch { position: relative; }
.dsearch svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.dsearch input { width: min(340px, 42vw); padding: 13px 16px 13px 44px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); font: inherit; font-size: 0.9rem; color: var(--ink); transition: border-color 0.2s, box-shadow 0.25s; }
.dsearch input::placeholder { color: var(--muted); }
.dsearch input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47, 107, 237, 0.12); }

/* --- The counts strip, which is also navigation --- */
.statbar { display: flex; align-items: stretch; gap: 0; padding: 6px; margin-bottom: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--lift-1); }
.statstrip { flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
  padding: 0; margin: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.statcell { position: relative; display: flex; align-items: center; gap: 14px; padding: 15px 18px; text-align: left;
  background: transparent; border: 0; border-radius: 16px; cursor: pointer; font: inherit; transition: background 0.2s; }
.statcell + .statcell::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--line); }
.statcell:hover { background: var(--grey-bg); }
.statcell__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  background: var(--grey-tint); color: var(--ink-soft); transition: background 0.2s, color 0.2s; }
.statcell__icon svg { width: 20px; height: 20px; }
.statcell__num { position: relative; padding-bottom: 9px; }
.statcell strong { display: block; font-size: 1.45rem; line-height: 1.1; color: var(--ink); }
.statcell small { display: block; margin-top: 1px; font-size: 0.82rem; color: var(--muted); }
.statcell.is-on .statcell__icon { background: var(--blue-tint); color: var(--blue); }
.statcell.is-on .statcell__num::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 2px; background: var(--blue); }

/* --- Square icon action (the +) --- */
.iconbtn { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 0; cursor: pointer;
  border-radius: 14px; background: var(--ink); color: var(--white); transition: background 0.2s, transform 0.2s; }
.iconbtn svg { width: 20px; height: 20px; transition: transform 0.28s var(--ease-out); }
.iconbtn:hover { background: #000; transform: translateY(-1px); }
.iconbtn:active { transform: scale(0.95); }
.iconbtn.is-open svg { transform: rotate(45deg); }

/* --- Tabs: underline, not a pill shell --- */
.dseg { display: flex; gap: 0; padding: 0; margin-bottom: 16px; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; box-shadow: none; }
.dseg__btn { position: relative; padding: 12px 2px; margin-right: 26px; border-radius: 0; font-size: 0.92rem; font-weight: 600;
  color: var(--muted); background: transparent !important; box-shadow: none !important; }
.dseg__btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; border-radius: 2px;
  background: transparent; transition: background 0.22s; }
.dseg__btn:hover { color: var(--ink-soft); }
.dseg__btn.is-on { color: var(--ink); }
.dseg__btn.is-on::after { background: var(--ink); }
.dseg__n { background: var(--grey-tint); color: var(--muted); }
.dseg__btn.is-on .dseg__n { background: var(--blue-tint); color: var(--blue); }
.dseg--sm .dseg__btn { padding: 10px 2px; margin-right: 22px; font-size: 0.86rem; }

/* --- Surfaces --- */
.account__card, .reqcard, .dtile { background: var(--card); border-radius: 20px; border-color: var(--line); box-shadow: var(--lift-1); }
.reqcard:hover, .dtile:hover { border-color: #d6dae1; box-shadow: var(--lift-2); }
.reqcard__eyebrow { color: var(--muted); }
.drow__avatar, .dcard__icon { border-radius: 14px; }
.drow__avatar { background: var(--grey-tint); color: var(--ink-soft); }
.dcard__icon { background: var(--blue-tint) !important; color: var(--blue) !important; }
.dcard__head { background: var(--card); border-bottom: 1px solid var(--line); }
.dcard__count { background: var(--grey-tint); color: var(--ink-soft); border: 0; }

/* --- Tags and pills --- */
.rtag--mentor { background: var(--blue-tint); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue-line); }
.rtag--mentee { background: var(--grey-tint); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line); }
.goalpill { background: var(--blue-tint); color: var(--blue-deep); }
.badge { background: var(--blue-tint); color: var(--blue); }
.stag--pub { background: var(--blue-tint); color: var(--blue); }
.stag--priv { background: var(--grey-tint); color: var(--muted); }
.livetag { background: #e0533d; }

/* --- Empty states: title, supporting line, action --- */
.dash__empty { padding: 30px 16px 26px; gap: 6px; }
.dash__empty-icon { width: 62px; height: 62px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); }
.dash__empty-icon svg { width: 25px; height: 25px; }
.dash__empty strong { margin-top: 8px; font-size: 1rem; color: var(--ink); }
.dash__empty p { margin: 0; font-size: 0.88rem; color: var(--muted); }
.dash__empty .btn { margin-top: 12px; }

/* --- Forms and the share bar follow the blue accent --- */
.vispick__opt input { accent-color: var(--blue); }
.vispick__opt:has(input:checked) { border-color: var(--blue); background: var(--blue-tint); box-shadow: 0 0 0 3px rgba(47, 107, 237, 0.12); }
.sharebar { background: var(--blue-tint); border-color: var(--blue-line); }
.sharebar__head svg { color: var(--blue); }
.dash__form--boxed { background: var(--grey-bg); border-color: var(--line); }
.search input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47, 107, 237, 0.12); }

@media (max-width: 760px) {
  .dtop { flex-direction: column; align-items: stretch; }
  .dtop__side { flex-direction: column; align-items: stretch; }
  .dsearch input { width: 100%; }
  .statstrip { grid-auto-flow: row; grid-auto-columns: auto; }
  .statcell + .statcell::before { left: 18px; right: 18px; top: 0; bottom: auto; width: auto; height: 1px; }
}


/* One panel area under the counts strip: whichever count is selected is the
   only thing shown. Replaces the old two-column split. */
.dash__panels { overflow-y: auto; overscroll-behavior: contain; padding-right: 6px;
  scrollbar-width: thin; scrollbar-color: rgba(20, 23, 28, 0.15) transparent; }
.dash__panels::-webkit-scrollbar { width: 6px; }
.dash__panels::-webkit-scrollbar-thumb { background: rgba(20, 23, 28, 0.15); border-radius: 3px; }
.dash__panels > [data-seg-panel] { display: block; }
.reqgrid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); margin-bottom: 0; }
.dfind__title { margin: 24px 0 12px; font-size: 1.02rem; letter-spacing: -0.01em; color: var(--ink); }

/* The card head keeps its action on one line even when the title wraps. */
.dcard__head { flex-wrap: nowrap; gap: 14px; }
.dcard__titles { flex: 1; min-width: 0; }
.dash__sub { font-size: 0.82rem; }
@media (max-width: 900px) { .dash__panels { max-height: none !important; overflow: visible; padding-right: 0; } }


/* ==========================================================================
   Host a session — the form inside the Sessions card.
   The global `.field input { width:100% }` was stretching the radio buttons
   across the row and shoving their labels off the card; radios opt out here.
   ========================================================================== */
.dash__form--boxed { padding: 20px; margin: 14px 0 18px; border-radius: 16px; background: var(--grey-bg); border: 1px solid var(--line); }
.dash__form { gap: 16px; }
.dash__form .field { gap: 6px; min-width: 0; }
.dash__form .field label { font-size: 0.82rem; font-weight: 600; }
.dash__form .field input,
.dash__form .field select {
  width: 100%; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); font: inherit; font-size: 0.9rem; color: var(--ink);
}
.dash__form .field input:focus,
.dash__form .field select:focus,
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: var(--card); border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 107, 237, 0.14);
}
.dash__form-row { gap: 12px; }

/* Who can join — two option tiles, radio kept its natural size */
.vispick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vispick__opt { align-items: flex-start; gap: 11px; padding: 13px 14px; border-radius: 14px;
  background: var(--card); border: 1.5px solid var(--line); }
.vispick__opt input[type="radio"] {
  width: 17px; height: 17px; min-width: 17px; flex: 0 0 17px; margin: 2px 0 0; padding: 0;
  border-radius: 50%; accent-color: var(--blue); background: none; box-shadow: none;
}
.vispick__opt > span { flex: 1; min-width: 0; }
.vispick__opt strong { font-size: 0.88rem; line-height: 1.3; }
.vispick__opt small { font-size: 0.76rem; line-height: 1.4; }

/* Actions sit on their own line, primary first */
.dash__form .btn-row { display: flex; align-items: center; gap: 12px; margin: 2px 0 0; flex-wrap: wrap; }
.dash__form .form-msg { font-size: 0.82rem; }

@media (max-width: 700px) { .vispick { grid-template-columns: 1fr; } }


/* ==========================================================================
   Discussions — the fourth section. Same `discussions` docs as the app.
   ========================================================================== */
.statstrip { grid-auto-columns: minmax(0, 1fr); }
.statcell { padding: 15px 16px; gap: 12px; }
.statcell__icon { width: 42px; height: 42px; }
.statcell strong { font-size: 1.35rem; }

.dfilters { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 0 6px; }
.dfilters .filter { padding: 7px 14px; border-radius: var(--r-pill); font-size: 0.82rem; font-weight: 600;
  background: var(--grey-tint); color: var(--ink-soft); border: 0; cursor: pointer; transition: background 0.2s, color 0.2s; }
.dfilters .filter:hover { background: #e3e6e9; }
.dfilters .filter.is-active { background: var(--ink); color: var(--white); }

.drow--tap { cursor: pointer; border-radius: 12px; transition: background 0.18s; }
.drow--tap:hover { background: var(--grey-bg); }
.dmeta { gap: 14px; font-size: 0.8rem; color: var(--muted); }
.dmeta span { display: inline-flex; align-items: center; gap: 5px; }
.dmeta svg { width: 14px; height: 14px; }

.thread { padding: 4px 0 0; }
.thread__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.thread__title { margin: 10px 0 4px; font-size: 1.2rem; letter-spacing: -0.015em; color: var(--ink); }
.thread__body { margin: 14px 0 16px; font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); white-space: pre-line; }
.thread__foot { display: flex; align-items: center; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.thread__foot .btn svg { width: 15px; height: 15px; }
.thread__replies { display: grid; gap: 10px; margin-top: 16px; }
.thread__reply { padding: 13px 16px; background: var(--grey-bg); border-radius: 14px; }
.thread__reply-top { display: flex; justify-content: space-between; gap: 10px; }
.thread__reply-top strong { color: var(--ink); }
.thread__reply p { margin: 6px 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--ink-soft); white-space: pre-line; }
.thread__none { font-size: 0.88rem; text-align: center; padding: 10px 0; }
.thread__ask { display: flex; gap: 10px; margin-top: 16px; border-top: 0; padding: 0; }
.thread__ask input { flex: 1; min-width: 0; padding: 12px 15px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); font: inherit; font-size: 0.9rem; color: var(--ink); }
.thread__ask input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47, 107, 237, 0.14); }
.dash__form textarea { width: 100%; min-height: 110px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); font: inherit; font-size: 0.9rem; color: var(--ink); resize: vertical; }
.dash__form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47, 107, 237, 0.14); }
.auth__back { background: none; border: 0; cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 600;
  color: var(--muted); padding: 6px 0 12px; }
.auth__back:hover { color: var(--ink); }

@media (max-width: 900px) { .statstrip { grid-auto-flow: row; } }


/* ==========================================================================
   Availability calendar (mentors)
   ========================================================================== */
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px 12px; }
.cal__head strong { font-size: 1.02rem; letter-spacing: -0.01em; color: var(--ink); }
.cal__nav { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); cursor: pointer;
  border-radius: 10px; background: var(--card); color: var(--ink); font-size: 1.1rem; line-height: 1; transition: background 0.18s; }
.cal__nav:hover { background: var(--grey-bg); }

.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal__grid--head { gap: 6px; margin-bottom: 6px; }
.cal__wd { text-align: center; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cal__pad { aspect-ratio: 1; }
.cal__day { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid transparent; cursor: pointer;
  border-radius: 12px; background: var(--grey-bg); color: var(--ink); font: inherit; font-size: 0.9rem; font-weight: 600;
  transition: background 0.18s, border-color 0.18s, color 0.18s; }
.cal__day:hover:not(:disabled) { background: var(--blue-tint); border-color: var(--blue-line); }
.cal__day.is-past { background: transparent; color: #c3c8cd; cursor: default; }
.cal__day.is-today { border-color: var(--blue); color: var(--blue); }
.cal__day.has-slots { background: var(--blue-tint); color: var(--blue-deep); }
.cal__day.is-picked { background: var(--ink); color: var(--white); border-color: var(--ink); }
.cal__dot { position: absolute; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
.cal__day.is-picked .cal__dot { background: var(--white); }

.cal__day-panel { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--grey-bg); }
.cal__day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cal__day-head strong { font-size: 0.98rem; color: var(--ink); }
.cal__slots { display: grid; gap: 8px; margin-bottom: 12px; }
.cal__slot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.cal__slot > span { display: inline-flex; align-items: center; gap: 9px; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.cal__slot svg { width: 15px; height: 15px; color: var(--blue); }
.cal__add { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; }
.cal__add .field { gap: 5px; }
.cal__add .field label { font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }
.cal__add input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--card);
  font: inherit; font-size: 0.88rem; color: var(--ink); width: auto; }
.cal__add input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47, 107, 237, 0.14); }
.cal__upcoming { margin-top: 8px; }
.cal__upcoming .drow:first-child { border-top: 1px solid var(--line); padding-top: 13px; }
.iconlink[data-cal-del]:hover { background: #fdecea; color: #c0392b; }

/* A mentor's open times, shown to mentees on their profile */
.availchips { display: flex; flex-wrap: wrap; gap: 7px; }
.availchip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--r-pill);
  background: var(--blue-tint); color: var(--blue-deep); font-size: 0.79rem; font-weight: 600; }
.availchip b { font-weight: 700; }

@media (max-width: 560px) { .cal__day { font-size: 0.82rem; border-radius: 10px; } .cal__add { gap: 8px; } }


/* ==========================================================================
   Live session — our own call UI (daily-js call object, no Prebuilt iframe).
   Dark stage, rounded tiles, one floating control bar.
   ========================================================================== */
.call { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column;
  background: #0b0d10; color: #fff; }

/* Top bar */
.call__top { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px; flex-shrink: 0; }
.call__id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.call__id strong { display: block; font-size: 0.98rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call__id small { display: block; margin-top: 2px; font-size: 0.79rem; color: rgba(255, 255, 255, 0.55); }
.call__live { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
  background: rgba(224, 83, 61, 0.16); color: #ff7a63; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.call__live i { width: 7px; height: 7px; border-radius: 50%; background: #ff5a3d; animation: callPulse 1.8s ease-in-out infinite; }
@keyframes callPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } }
.call__count { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.8); font-size: 0.84rem; font-weight: 600; }
.call__count svg { width: 16px; height: 16px; }

/* Stage */
.call__stage { flex: 1; min-height: 0; padding: 0 16px; display: flex; }
.call__connecting { margin: auto; display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.6); font-size: 0.92rem; }
.call__connecting .spinner { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: #fff;
  border-radius: 50%; animation: callSpin 0.8s linear infinite; }
@keyframes callSpin { to { transform: rotate(360deg); } }

.call__grid { flex: 1; min-height: 0; display: grid; gap: 12px; align-content: center;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.call__grid:has(> :nth-child(5)) { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* A tile */
.call__tile { position: relative; aspect-ratio: 16 / 9; min-height: 0; border-radius: 18px; overflow: hidden;
  background: #16191e; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); transition: box-shadow 0.22s; }
.call__tile video { width: 100%; height: 100%; object-fit: cover; display: block; background: #16191e; }
.call__tile.is-cam-off video { opacity: 0; }
.call__tile.is-speaking { box-shadow: 0 0 0 2.5px #2f6bed, 0 8px 30px rgba(47, 107, 237, 0.3); }
.call__avatar { position: absolute; inset: 0; display: none; place-items: center; }
.call__tile.is-cam-off .call__avatar { display: grid; }
.call__avatar span { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(150deg, #2f6bed, #1d3f8f); color: #fff; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.02em; }
.call__name { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px;
  max-width: calc(100% - 24px); padding: 6px 12px; border-radius: 999px;
  background: rgba(11, 13, 16, 0.62); backdrop-filter: blur(8px); font-size: 0.82rem; font-weight: 600; color: #fff; }
.call__name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call__mic { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex-shrink: 0; }
.call__mic.is-off { background: #ff5a3d; }

/* Someone is presenting */
.call__stage--shared { gap: 12px; }
.call__share { position: relative; flex: 1; min-width: 0; border-radius: 18px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.call__share video { width: 100%; height: 100%; object-fit: contain; display: block; }
.call__share-tag { position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: 999px;
  background: rgba(11, 13, 16, 0.68); backdrop-filter: blur(8px); font-size: 0.78rem; font-weight: 600; }
.call__strip { width: 210px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto;
  padding-right: 2px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
.call__strip .call__tile { border-radius: 14px; flex-shrink: 0; }
.call__strip .call__avatar span { width: 48px; height: 48px; font-size: 1rem; }
.call__strip .call__name { left: 8px; bottom: 8px; padding: 4px 9px; font-size: 0.72rem; }

/* Control bar */
.call__bar { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); flex-shrink: 0; }
.cbtn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border: 0; cursor: pointer;
  border-radius: 14px; background: rgba(255, 255, 255, 0.1); color: #fff; font: inherit; font-size: 0.86rem; font-weight: 600;
  transition: background 0.18s, transform 0.15s, color 0.18s; }
.cbtn svg { width: 19px; height: 19px; }
.cbtn:hover { background: rgba(255, 255, 255, 0.17); }
.cbtn:active { transform: scale(0.96); }
.cbtn.is-off { background: #e0533d; color: #fff; }
.cbtn.is-off:hover { background: #c9432f; }
.cbtn.is-on { background: #2f6bed; }
.cbtn.is-on:hover { background: #245ad3; }
.cbtn--leave { background: #e0533d; padding-inline: 22px; }
.cbtn--leave:hover { background: #c9432f; }
.call__viewing { font-size: 0.86rem; color: rgba(255, 255, 255, 0.6); margin-right: 6px; }

@media (max-width: 860px) {
  .call__stage { padding: 0 10px; }
  .call__stage--shared { flex-direction: column; }
  .call__strip { width: auto; flex-direction: row; height: 92px; overflow-x: auto; overflow-y: hidden; }
  .call__strip .call__tile { width: 150px; height: 100%; aspect-ratio: auto; }
  .cbtn span { display: none; }
  .cbtn { padding: 13px; }
  .cbtn--leave span { display: inline; }
}


/* ==========================================================================
   Call stage v2 — self-view is a corner tile, stage tiles never go full-bleed.
   ========================================================================== */
.call__stage { position: relative; flex: 1; min-height: 0; padding: 0 16px; display: flex; }
.call__main { flex: 1; min-width: 0; min-height: 0; display: flex; }
.call__main--shared { gap: 12px; }

/* Faces are capped so one person doesn't become a billboard. */
.call__grid { flex: 1; min-height: 0; display: grid; gap: 12px; align-content: center; justify-content: center;
  margin: auto; width: 100%; }
.call__grid[data-n="1"] { grid-template-columns: minmax(0, 780px); }
.call__grid[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 560px)); max-width: 1160px; }
.call__grid[data-n="3"], .call__grid[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 480px)); max-width: 1000px; }
.call__grid[data-n="5"] { grid-template-columns: repeat(3, minmax(0, 380px)); max-width: 1180px; }

/* Nobody else here yet */
.call__wait { margin: auto; display: grid; justify-items: center; gap: 10px; text-align: center; padding: 24px; }
.call__wait-icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.55); }
.call__wait-icon svg { width: 30px; height: 30px; }
.call__wait strong { font-size: 1.08rem; color: #fff; margin-top: 6px; }
.call__wait p { margin: 0; max-width: 40ch; font-size: 0.9rem; line-height: 1.55; color: rgba(255, 255, 255, 0.5); }

/* Self-view: small, bottom-right, out of the way, collapsible */
.call__self { position: absolute; right: 22px; bottom: 18px; z-index: 3; width: 236px; aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden; background: #16191e;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 12px 32px rgba(0, 0, 0, 0.45);
  transition: width 0.25s var(--ease-out), aspect-ratio 0.25s, box-shadow 0.2s; }
.call__self video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scaleX(-1); }
.call__self.is-cam-off video { opacity: 0; }
.call__self .call__avatar { position: absolute; inset: 0; display: none; place-items: center; }
.call__self.is-cam-off .call__avatar { display: grid; }
.call__self .call__avatar span { width: 54px; height: 54px; font-size: 1.1rem; }
.call__self .call__name { left: 9px; bottom: 9px; padding: 4px 10px; font-size: 0.73rem; }
.call__self-btn { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: grid; place-items: center;
  border: 0; cursor: pointer; border-radius: 8px; background: rgba(11, 13, 16, 0.6); backdrop-filter: blur(6px);
  color: #fff; font-size: 0.9rem; line-height: 1; transition: background 0.18s; }
.call__self-btn:hover { background: rgba(11, 13, 16, 0.85); }
.call__self.is-hidden { width: 116px; aspect-ratio: 3 / 1; }
.call__self.is-hidden video, .call__self.is-hidden .call__avatar, .call__self.is-hidden .call__name { display: none; }
.call__self.is-hidden .call__self-btn { inset: 0; width: 100%; height: 100%; border-radius: 14px; background: transparent; }
.call__self.is-hidden::after { content: "Self-view"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 0.74rem; font-weight: 600; color: rgba(255, 255, 255, 0.6); pointer-events: none; }

/* Presenting: the share is the stage, faces sit beside it */
.call__strip[hidden] { display: none; }

@media (max-width: 860px) {
  .call__grid[data-n] { grid-template-columns: minmax(0, 1fr) !important; max-width: none; }
  .call__self { right: 12px; bottom: 12px; width: 132px; }
  .call__self .call__avatar span { width: 40px; height: 40px; font-size: 0.86rem; }
}

/* ==========================================================================
   Live captions, and the recording / transcript viewer
   ========================================================================== */
.call__rec { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.85); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; }
.call__rec i { width: 7px; height: 7px; border-radius: 50%; background: #ff3b30; animation: callPulse 1.6s ease-in-out infinite; }
.cbtn.is-rec { background: #ff3b30; }
.cbtn.is-rec:hover { background: #e0301f; }
.cbtn.is-off-quiet { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.45); }

.call__caption { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 4;
  max-width: min(760px, calc(100% - 300px)); padding: 12px 18px; border-radius: 14px;
  background: rgba(11, 13, 16, 0.82); backdrop-filter: blur(10px); color: #fff;
  font-size: 1rem; line-height: 1.5; text-align: center; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); }
.call__caption b { color: #7aa5ff; font-weight: 700; margin-right: 8px; }
.call__caption.is-interim { color: rgba(255, 255, 255, 0.7); }

.mediabox { padding: 14px 0 4px; }
.recrow { padding: 14px 0; border-top: 1px solid var(--line); }
.recrow:first-child { border-top: 0; }
.recrow__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.recrow__top strong { font-size: 0.95rem; color: var(--ink); }
.recrow audio { width: 100%; display: block; margin-bottom: 8px; }
.tscript { max-height: 44vh; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.tscript p { margin: 0 0 10px; font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft); }
.tscript b { display: block; font-size: 0.76rem; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 0.05em; }
@media (max-width: 860px) { .call__caption { max-width: calc(100% - 24px); font-size: 0.92rem; bottom: 14px; } }

.setupnote { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.84rem; line-height: 1.55; }
.setupnote strong { color: var(--ink); }

.setupbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 16px; border-radius: 16px;
  background: var(--blue-tint); border: 1px solid var(--blue-line); }
.setupbar strong { display: block; font-size: 0.92rem; color: var(--ink); }
.setupbar small { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--ink-soft); }

.lockedfield { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--grey-bg);
  font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); }
.lockedfield svg { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.field .hint { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
.field .hint a { color: var(--blue); text-decoration: underline; }

/* Discover tiles carry no icon — the label and blurb do the work, so the
   tiles tighten up rather than leaving a gap where a glyph used to sit. */
.dtile { min-height: 0; padding: 20px; gap: 5px; }
.dtile__emoji { display: none; }

/* Time-of-day mark beside the greeting — sunrise, sun or moon. Replaces the
   waving emoji, which rendered at a different weight to everything else and
   changed shape between platforms. */
.greeticon { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0; color: var(--muted); }
.greeticon svg { width: 20px; height: 20px; }
.wave { display: none; }


/* ==========================================================================
   Cards v2 — real icons, clearer hierarchy, and depth that comes from tone
   rather than colour. Each Discover track gets its own tint, all inside the
   blue / indigo / slate family so the page stays one temperature.
   ========================================================================== */
:root {
  --t-learn:  #5b53d8;   --t-learn-bg:  #eeecfd;
  --t-biz:    #1c7c93;   --t-biz-bg:    #e6f3f7;
  --t-ment:   #3f5ecb;   --t-ment-bg:   #ebeffc;
}

/* --- Discover tiles --- */
.discover__grid { gap: 14px; }
.dtile { position: relative; align-items: flex-start; gap: 0; padding: 22px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--lift-1);
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s, border-color 0.24s; }
.dtile__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px;
  border-radius: 13px; background: var(--grey-tint); color: var(--ink-soft); flex-shrink: 0;
  transition: background 0.24s, color 0.24s, transform 0.28s var(--ease-out); }
.dtile__icon svg { width: 21px; height: 21px; }
.dtile__icon--lg { width: 52px; height: 52px; border-radius: 15px; margin: 0; }
.dtile__icon--lg svg { width: 24px; height: 24px; }
.dtile strong { display: block; margin: 5px 0 4px; font-size: 1.08rem; letter-spacing: -0.015em; color: var(--ink); }
.dtile small { font-size: 0.84rem; line-height: 1.5; color: var(--muted); }
.dtile__go { position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--grey-bg); color: var(--muted);
  opacity: 0; transform: translateX(-4px); transition: opacity 0.24s, transform 0.24s, background 0.24s, color 0.24s; }
.dtile__go svg { width: 15px; height: 15px; }
.dtile:hover { transform: translateY(-3px); box-shadow: var(--lift-2); }
.dtile:hover .dtile__icon { transform: scale(1.06); }
.dtile:hover .dtile__go { opacity: 1; transform: translateX(0); }

/* One tint per track — carried by the icon, the hover border and the chevron. */
.dtile--jobs .dtile__icon { background: var(--t-learn-bg);  color: var(--t-learn); }
.dtile--enterprise .dtile__icon { background: var(--t-biz-bg);    color: var(--t-biz); }
.dtile--mentorship .dtile__icon { background: var(--t-ment-bg); color: var(--t-ment); }
.dtile--jobs:hover .dtile__go { background: var(--t-learn-bg); color: var(--t-learn); }
.dtile--enterprise:hover .dtile__go { background: var(--t-biz-bg);  color: var(--t-biz); }
.dtile--mentorship:hover .dtile__go { background: var(--t-ment-bg); color: var(--t-ment); }

/* --- Counts strip --- */
.statstrip { padding: 8px; border-radius: 20px; }
.statcell__icon { border-radius: 13px; }
.statcell.is-on { background: var(--card); }
.statcell.is-on .statcell__icon { box-shadow: inset 0 0 0 1px var(--blue-line); }

/* --- List cards --- */
.dlist .drow, .dcard .drow { border-top-color: var(--line); }
.drow__avatar { background: linear-gradient(150deg, var(--grey-tint), #e3e7ea); color: var(--ink-soft);
  font-size: 0.8rem; letter-spacing: 0.02em; }
.drow__name { gap: 8px; font-size: 0.95rem; letter-spacing: -0.01em; }
.reqcard { padding: 22px; border-radius: 18px; }
.reqcard:hover { border-color: color-mix(in srgb, var(--blue) 32%, var(--line)); }
.dcard { border-radius: 20px; }
.dcard__icon { border-radius: 13px; }

/* Depth without a heavier border: a hairline highlight along the top edge. */
.account__card, .reqcard, .dtile, .statstrip {
  box-shadow: 0 1px 2px rgba(20, 23, 28, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}


/* ==========================================================================
   Discover tiles: tinted surfaces.
   The card carries a ~6% wash of its accent and the icon tile a ~15% one, so
   the badge still separates from the card it sits on. Values are literal hex
   rather than color-mix so the wash does not vanish on an older browser.
   ========================================================================== */
.dtile--jobs   { background: #f5f5fd; border-color: #e4e2f8; }
.dtile--enterprise   { background: #f1f7f9; border-color: #dceaef; }

.dtile--jobs .dtile__icon   { background: #e6e5f9; color: var(--t-learn); }
.dtile--enterprise .dtile__icon   { background: #ddebef; color: var(--t-biz); }
.dtile--mentorship .dtile__icon { background: #e2e7f7; color: var(--t-ment); }

/* Hover deepens the wash instead of only lifting the card. */
.dtile--jobs:hover   { background: #eeecfd; border-color: #d5d1f4; }
.dtile--enterprise:hover   { background: #e6f3f7; border-color: #c9e0e7; }

/* The blurb sits on tint now, so it needs a touch more contrast than --muted. */

/* The chosen-track header badge keeps its tile tint. */

/* Working surfaces stay white: lists, counts and forms are read closely and a
   wash behind body text costs legibility for no gain. */
.account__card, .statstrip, .reqcard { background: var(--card); }

/* The chosen-track step owns the page, so its options need room to breathe. */
.discover__options { gap: 12px; margin-top: 4px; }
.doption { padding: 16px 18px; border-radius: 14px; }
.auth__back { margin-bottom: 4px; }

/* Discover tiles are links now, not a two-step chooser. */
a.dtile { text-decoration: none; }

/* Back out of a hub. Sits above the header card on its own line — `flex` with
   `max-content` so it never tries to share a line with the card's eyebrow. */
.hub__back { display: flex; width: max-content; align-items: center; gap: 8px; margin: 0 0 14px;
  padding: 9px 16px 9px 12px; border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--line); color: var(--ink-soft);
  font-size: 0.85rem; font-weight: 600; text-decoration: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s; }
.hub__back:hover { background: var(--grey-tint); color: var(--ink); border-color: #d6dae1; }
.hub__back svg { width: 16px; height: 16px; flex-shrink: 0; }


/* ==========================================================================
   Landing v3 — stated heading, horizontal cards with a persistent arrow,
   and a counts strip where each tile carries its own tint.
   ========================================================================== */
.discover { margin-bottom: 26px; }
.discover__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }

/* Card: icon on its own row, then the copy with the arrow beside it. */
a.dtile, .dtile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 4px 16px; padding: 22px; min-height: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(20, 23, 28, 0.05);
  text-decoration: none;
  transition: transform 0.26s var(--ease-out), box-shadow 0.26s, border-color 0.22s;
}
.dtile__icon { grid-column: 1 / -1; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 15px;
  display: grid; place-items: center; transition: transform 0.26s var(--ease-out); }
.dtile__icon svg { width: 24px; height: 24px; }
.dtile__body { grid-column: 1; grid-row: 2; min-width: 0; }
.dtile__body strong { display: block; margin: 0 0 4px; font-size: 1.12rem; letter-spacing: -0.02em; color: var(--ink); }
.dtile__body small { display: block; font-size: 0.88rem; line-height: 1.5; color: var(--muted); }
.dtile__go { grid-column: 2; grid-row: 2; position: static; opacity: 1; transform: none;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  transition: transform 0.24s var(--ease-out); }
.dtile__go svg { width: 18px; height: 18px; }
.dtile:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(20, 23, 28, 0.09); border-color: #d6dae1; }
.dtile:hover .dtile__go { transform: translateX(3px); }
.dtile:hover .dtile__icon { transform: none; }

/* One hue per destination — icon tile and arrow share it. */
.dtile--jobs .dtile__icon       { background: #ece9fd; color: #6d4de0; }
.dtile--jobs .dtile__go         { background: #ece9fd; color: #6d4de0; }
.dtile--enterprise .dtile__icon   { background: #e3f5ee; color: #14846a; }
.dtile--enterprise .dtile__go     { background: #e3f5ee; color: #14846a; }
.dtile--mentorship .dtile__icon { background: #e6edfd; color: #2f6bed; }
.dtile--mentorship .dtile__go   { background: #e6edfd; color: #2f6bed; }

/* Counts strip: tinted per measure rather than one flat grey. */
.statcell__icon { width: 48px; height: 48px; border-radius: 14px; }
.statcell--blue .statcell__icon   { background: #e6edfd; color: #2f6bed; }
.statcell--violet .statcell__icon { background: #ece9fd; color: #6d4de0; }
.statcell--green .statcell__icon  { background: #e3f5ee; color: #14846a; }
.statcell--rose .statcell__icon   { background: #fdeaf0; color: #c0396b; }
.statcell--slate .statcell__icon  { background: #eaeef3; color: #4b5a6e; }
.statcell.is-on .statcell__icon   { box-shadow: none; }

/* Buttons that carry an icon in the design. */
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn--sm svg { width: 15px; height: 15px; }

@media (max-width: 720px) {
  .dtile { padding: 18px; }
  .dtile__icon { width: 46px; height: 46px; margin-bottom: 12px; }
  .dtile__go { width: 38px; height: 38px; }
}


/* ==========================================================================
   PALETTE v3 — violet primary on a soft lavender wash. Icon tiles and arrows
   are solid fills with white glyphs, not tints with coloured glyphs.
   ========================================================================== */
:root {
  --violet: #7c5cf5;
  --violet-deep: #6b46e5;
  --violet-tint: #efeaff;
  --violet-line: #ddd2fd;

  --teal: #14a48b;
  --teal-deep: #0d8a74;
  --teal-tint: #e2f5f0;

  --sky: #3b82f6;
  --sky-deep: #2563eb;
  --sky-tint: #e6eefe;

  --coral: #fb7a68;
  --coral-tint: #ffece8;

  /* The accent tokens the rest of the sheet reads. */
  --blue: var(--violet);
  --blue-deep: var(--violet-deep);
  --blue-tint: var(--violet-tint);
  --blue-line: var(--violet-line);
  --green: var(--violet);
  --green-mint: var(--violet-tint);
  --green-mint-border: var(--violet-line);
}

/* A lavender wash instead of flat grey. */
body, .account, body.is-app .account, .hub {
  background: linear-gradient(165deg, #f4f1ff 0%, #fbf6fc 42%, #f2f5ff 100%);
  background-attachment: fixed;
}
.wordmark .wi { color: var(--violet); }

/* --- Primary action: violet, not black --- */
.btn--orange, .btn--orange:hover {
  background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
  color: var(--white); box-shadow: 0 4px 14px rgba(124, 92, 245, 0.32);
}
.btn--orange:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(124, 92, 245, 0.4); }
.btn--orange:active { transform: scale(0.97); }
.iconbtn { background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%); }
.iconbtn:hover { background: linear-gradient(135deg, var(--violet-deep) 0%, #5c34d6 100%); }
.chatbot__fab { background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%) !important;
  color: var(--white) !important; box-shadow: 0 8px 24px rgba(124, 92, 245, 0.36); }

/* --- Destination cards: solid icon tile, solid arrow --- */
.dtile { border-color: #ece9f6; box-shadow: 0 2px 10px rgba(84, 62, 150, 0.06); }
.dtile:hover { border-color: #ddd6f2; box-shadow: 0 16px 36px rgba(84, 62, 150, 0.13); }
.dtile__icon { color: var(--white); box-shadow: 0 6px 16px rgba(84, 62, 150, 0.22); }
.dtile__go { color: var(--white); }

.dtile--jobs .dtile__icon, .dtile--jobs .dtile__go {
  background: linear-gradient(140deg, #9b7bff 0%, var(--violet-deep) 100%); color: var(--white); }
.dtile--enterprise .dtile__icon, .dtile--enterprise .dtile__go {
  background: linear-gradient(140deg, #29c3a6 0%, var(--teal-deep) 100%); color: var(--white); }
.dtile--mentorship .dtile__icon, .dtile--mentorship .dtile__go {
  background: linear-gradient(140deg, #5b9bff 0%, var(--sky-deep) 100%); color: var(--white); }
.dtile--jobs .dtile__go       { box-shadow: 0 5px 14px rgba(107, 70, 229, 0.34); }
.dtile--enterprise .dtile__go   { box-shadow: 0 5px 14px rgba(13, 138, 116, 0.32); }
.dtile--mentorship .dtile__go { box-shadow: 0 5px 14px rgba(37, 99, 235, 0.32); }

/* --- Counts strip: soft tints, coloured glyphs --- */
.statcell--blue .statcell__icon   { background: var(--violet-tint); color: var(--violet-deep); }
.statcell--violet .statcell__icon { background: var(--coral-tint);  color: #e8563f; }
.statcell--green .statcell__icon  { background: var(--teal-tint);   color: var(--teal-deep); }
.statcell--rose .statcell__icon   { background: var(--sky-tint);    color: var(--sky-deep); }
.statcell--slate .statcell__icon  { background: #eef0f6; color: #5b6478; }
.statcell.is-on .statcell__num::after { background: var(--violet); }

/* --- Surfaces --- */
.account__card, .statstrip, .reqcard, .dlist {
  border-color: #ece9f6; box-shadow: 0 2px 10px rgba(84, 62, 150, 0.06); }
.drow__avatar { background: linear-gradient(140deg, #9b7bff, var(--violet-deep)); color: var(--white); }
.nav__avatar { background: linear-gradient(140deg, #4b3a8f, #241a4d) !important; color: var(--white) !important; }
.rtag--mentor, .rtag--mentee { background: var(--violet-tint); color: var(--violet-deep); box-shadow: inset 0 0 0 1px var(--violet-line); }
.dseg__btn.is-on::after { background: var(--violet); }
.dseg__btn.is-on .dseg__n { background: var(--violet); color: var(--white); }
.dash__empty-icon { background: var(--violet-tint); color: var(--violet-deep); }
.dcard__icon { background: var(--violet-tint) !important; color: var(--violet-deep) !important; }
.goalpill, .badge { background: var(--violet-tint); color: var(--violet-deep); }
.dsearch input:focus, .field input:focus, .field select:focus, .field textarea:focus,
.search input:focus, .thread__ask input:focus {
  border-color: var(--violet); box-shadow: 0 0 0 4px rgba(124, 92, 245, 0.14); }
.dfilters .filter.is-active { background: var(--violet); }
.hub__back:hover { border-color: var(--violet-line); color: var(--violet-deep); }

/* ==========================================================================
   Session reminders in the page: a banner from 7 days out, a modal inside 15
   minutes. Both derived from loaded session data, so they need no network.
   ========================================================================== */
.salert { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 16px;
  background: var(--card); border: 1px solid var(--violet-line); border-radius: 16px;
  box-shadow: 0 2px 10px rgba(84, 62, 150, 0.07); }
.salert__icon { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 13px;
  background: var(--violet-tint); color: var(--violet-deep); }
.salert__icon svg { width: 19px; height: 19px; }
.salert__body { flex: 1; min-width: 0; }
.salert__body strong { display: block; font-size: 0.94rem; color: var(--ink); }
.salert__body small { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--muted); }
.salert__actions { flex-shrink: 0; }

/* Inside the final stretch it stops being informational. */
.salert--soon { border-color: transparent;
  background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
  box-shadow: 0 8px 24px rgba(124, 92, 245, 0.3); }
.salert--soon .salert__body strong { color: var(--white); }
.salert--soon .salert__body small { color: rgba(255, 255, 255, 0.82); }
.salert--soon .salert__icon { background: rgba(255, 255, 255, 0.18); color: var(--white); }
.salert--soon .btn--orange { background: var(--white); color: var(--violet-deep); box-shadow: none; }
.salert--soon .btn--orange:hover { background: #f3efff; }

.modal--nudge .modal__panel { max-width: 420px; }
.nudge { text-align: center; padding: 30px 26px 26px; }
.nudge__icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 20px;
  background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%); color: var(--white);
  box-shadow: 0 8px 22px rgba(124, 92, 245, 0.34); }
.nudge__icon svg { width: 27px; height: 27px; }
.nudge h3 { margin: 0 0 6px; font-size: 1.2rem; letter-spacing: -0.02em; color: var(--ink); }
.nudge p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--muted); }
.nudge__note { margin-top: 8px !important; color: var(--violet-deep) !important; font-weight: 600; }
.nudge .btn-row { justify-content: center; margin-top: 20px; }
@media (max-width: 560px) { .salert { align-items: flex-start; } .salert__actions { width: 100%; } .salert__actions .btn { width: 100%; justify-content: center; } }

/* ==========================================================================
   Streak: a cell in the counts strip, not a card of its own. A dashboard meant
   to fit one screen cannot afford a third full-width band above the lists, and
   the streak is a number about you — it belongs beside the other numbers.
   The drawer under it opens only when you actually owe something.
   ========================================================================== */
.streakcell { position: relative; display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  padding: 15px 20px 15px 16px; margin-right: 6px; border: 0; border-radius: 16px; cursor: pointer; font: inherit;
  text-align: left; background: var(--violet-tint); transition: background 0.2s; }
.streakcell:hover { background: #e6dfff; }
.streakcell__face { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 14px; background: var(--white); color: var(--violet-deep); }
.streakcell__face svg { width: 22px; height: 22px; }
.streakcell .statcell__num { padding-bottom: 0; }
.streakcell strong { display: block; font-size: 1.45rem; line-height: 1.1; color: var(--ink); }
.streakcell small { display: block; margin-top: 1px; font-size: 0.82rem; color: var(--muted); white-space: nowrap; }
/* How many things are waiting on you, without opening anything. */
.streakcell__dot { position: absolute; top: 9px; right: 9px; min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px; background: var(--violet); color: var(--white);
  font-size: 0.7rem; font-weight: 700; }
.streakcell.is-open { background: var(--violet); }
.streakcell.is-open strong { color: var(--white); }
.streakcell.is-open small { color: rgba(255, 255, 255, 0.85); }
.streakcell.is-open .streakcell__dot { background: var(--white); color: var(--violet-deep); }
/* The face carries the state, so the tint only ever agrees with it. */
.streakcell--ok { background: #fff6e3; }
.streakcell--ok .streakcell__face { color: #b5761a; }
.streakcell--ok.is-open { background: #b5761a; }
.streakcell--sad { background: #ffeae5; }
.streakcell--sad .streakcell__face { color: #c2402c; }
.streakcell--sad.is-open { background: #c2402c; }

.streakdrawer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 16px; margin: -8px 0 16px;
  background: var(--card); border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 18px 18px; box-shadow: var(--lift-1); }
.streakdrawer__clear { margin: 0; font-size: 0.84rem; color: var(--muted); }

.pairchip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--violet-tint); font-size: 0.8rem; color: var(--ink); }
.pairchip svg { width: 16px; height: 16px; color: var(--violet-deep); }
.pairchip b { font-weight: 600; }
.pairchip i { font-style: normal; color: var(--muted); }
.pairchip--ok { background: #fff6e3; } .pairchip--ok svg { color: #b5761a; }
.pairchip--sad { background: #ffeae5; } .pairchip--sad svg { color: #c2402c; }

.commits { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 6px; margin: 0;
  padding: 0 0 0 14px; list-style: none; border-left: 1px solid var(--line); }
.commits__row { display: flex; align-items: center; gap: 10px; transition: opacity 0.2s ease; }
.commits__row.is-going { opacity: 0.35; }
.commits__tick { display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; padding: 0;
  border: 1.6px solid var(--violet-line); border-radius: 8px; background: var(--white); color: transparent;
  cursor: pointer; transition: all 0.15s ease; }
.commits__tick svg { width: 14px; height: 14px; }
.commits__tick:hover { border-color: var(--violet); background: var(--violet-tint); color: var(--violet-deep); }
.commits__what { flex: 1; min-width: 0; }
.commits__what strong { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commits__what small { display: block; font-size: 0.75rem; color: var(--muted); }
.commits__row.is-late .commits__what small { color: #c2402c; font-weight: 600; }
.commits__drop { flex-shrink: 0; padding: 4px 10px; border: 0; border-radius: var(--r-pill); background: transparent;
  font-size: 0.74rem; color: var(--muted); cursor: pointer; }
.commits__drop:hover { background: var(--violet-tint); color: var(--violet-deep); }
.commits__more { font-size: 0.76rem; color: var(--muted); padding-left: 34px; }

@media (max-width: 900px) {
  .statbar { flex-direction: column; }
  .streakcell { margin: 0 0 6px; }
  .commits { border-left: 0; border-top: 1px solid var(--line); padding: 10px 0 0; min-width: 100%; }
}

/* ==========================================================================
   Pre-session check-in: the reminder asks something instead of announcing.
   ========================================================================== */
.moodrow { display: flex; justify-content: center; gap: 10px; margin: 20px 0 4px; }
.mood { display: grid; justify-items: center; gap: 6px; padding: 12px 14px; min-width: 84px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); color: var(--muted);
  font: inherit; font-size: 0.76rem; font-weight: 600; transition: border-color 0.18s, color 0.18s, background 0.18s, transform 0.18s; }
.mood svg { width: 26px; height: 26px; }
.mood:hover { border-color: var(--violet-line); color: var(--ink-soft); transform: translateY(-2px); }
.mood.is-on { border-color: var(--violet); background: var(--violet-tint); color: var(--violet-deep); }
.nudge__later { display: block; margin: 14px auto 0; padding: 4px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.82rem; color: var(--muted); text-decoration: underline; }
.nudge__later:hover { color: var(--ink); }
.nudge .btn-row { flex-wrap: wrap; }

/* The other person's answer, on the banner. */
.salert__checkin { display: none; margin-right: 12px; padding: 6px 12px; border-radius: var(--r-pill);
  font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.salert__checkin.is-yes { display: inline-block; background: var(--teal-tint); color: var(--teal-deep); }
.salert__checkin.is-no { display: inline-block; background: #ffe9e5; color: #c2402c; }
.salert--soon .salert__checkin.is-yes,
.salert--soon .salert__checkin.is-no { background: rgba(255, 255, 255, 0.2); color: var(--white); }
@media (max-width: 560px) { .moodrow { gap: 7px; } .mood { min-width: 0; flex: 1; padding: 10px 6px; } }

/* ==========================================================================
   Booking a mentor's published time. One slot, one person.
   ========================================================================== */
button.availchip { cursor: pointer; border: 1px solid var(--violet-line); font: inherit;
  transition: background 0.18s, border-color 0.18s, transform 0.18s; }
button.availchip:hover:not(:disabled) { background: var(--violet); color: var(--white); border-color: var(--violet);
  transform: translateY(-1px); }
button.availchip:hover:not(:disabled) b { color: var(--white); }
button.availchip:disabled { cursor: default; }
.availchip.is-taken { background: var(--grey-tint); color: var(--muted); border-color: var(--line);
  text-decoration: line-through; }
.availchip.is-taken b { color: var(--muted); }
.availnote { margin: 10px 0 0; font-size: 0.82rem; }

.cal__slot.is-booked { border-color: var(--violet-line); background: var(--violet-tint); }
.cal__slot.is-booked b { color: var(--violet-deep); }
.cal__taken { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--violet-deep); }
.cal__day.has-booked .cal__dot { background: var(--violet-deep); box-shadow: 0 0 0 2px var(--violet-tint); }

/* ==========================================================================
   Schedule — the month sits beside the day it selects, so the whole month is
   visible at once instead of half of it behind an inner scrollbar.
   ========================================================================== */
.cal__layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 22px; align-items: start; padding-top: 4px; }
.cal__month { min-width: 0; }
.cal__side { min-width: 0; display: grid; gap: 4px; }
.cal__side .cal__day-panel { margin-top: 0; }
.cal__side .cal__upcoming { margin-top: 4px; }
.cal__grid { gap: 7px; }
.cal__day { font-size: 0.86rem; border-radius: 11px; }
.cal__head { padding: 2px 2px 14px; }

/* The month needs room, so this panel opts out of the dashboard height cap. */
.dash__panels:has([data-seg-panel="calendar"]:not([hidden])) { max-height: none !important; overflow: visible !important; }

@media (max-width: 1100px) { .cal__layout { grid-template-columns: 1fr; gap: 18px; } }

/* ==========================================================================
   FAQ — the real STEM4Good questions, grouped. Nine sections, 34 questions,
   so they are numbered and banded rather than run as one long list.
   ========================================================================== */
.faq--grouped { display: grid; gap: 26px; max-width: 860px; margin: 0 auto; }
.faq__group { display: grid; gap: 10px; }
.faq__group-title { display: flex; align-items: center; gap: 12px; margin: 0 0 2px;
  font-size: 1.05rem; letter-spacing: -0.01em; color: var(--ink); }
.faq__group-title span { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 9px; background: var(--violet-tint); color: var(--violet-deep);
  font-size: 0.78rem; font-weight: 700; }
.faq--grouped .faq__item { border-radius: 14px; }
.faq--grouped .faq__q { gap: 16px; text-align: left; }
.faq--grouped .faq__q span:first-child { flex: 1; min-width: 0; }
.faq--grouped .faq__a-inner p { margin: 0; line-height: 1.65; color: var(--ink-soft); }
.faq--grouped .faq__a-inner a { color: var(--violet-deep); text-decoration: underline; }
@media (max-width: 620px) { .faq__group-title { font-size: 0.98rem; } }

/* A new unread arriving while you are looking at the page. */
@keyframes bellPing { 0%, 100% { transform: none; } 20%, 60% { transform: rotate(-12deg); } 40%, 80% { transform: rotate(12deg); } }
.bell--pinged .bell__btn svg { animation: bellPing 0.7s ease-in-out 2; transform-origin: 50% 15%; }

/* ==========================================================================
   Notification bell — unread is a count and a tag, not just a dot.
   ========================================================================== */
.bell__dot { display: grid; place-items: center; top: 2px; right: 2px; width: auto; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px; background: #dc2626; color: #fff;
  font-size: 0.66rem; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px var(--card); }
.bell--has-unread .bell__btn { color: var(--violet-deep); }
.bell__head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--line); }
.bell__head strong { font-size: 0.86rem; color: var(--ink); }
.bell__clear { border: 0; background: none; cursor: pointer; font: inherit; font-size: 0.78rem;
  font-weight: 600; color: var(--violet-deep); text-decoration: underline; padding: 2px; }
.bell__item.is-unread { background: var(--violet-tint); }
.bell__item strong { display: flex; align-items: center; gap: 8px; }
.bell__new { flex-shrink: 0; padding: 2px 7px; border-radius: 999px; background: var(--violet); color: #fff;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* ==========================================================================
   Session notes — Gemini's summary, action items and corrected transcript.
   ========================================================================== */
.notes__summary { margin: 0 0 4px; font-size: 0.95rem; line-height: 1.65; color: var(--ink); }
.notes__h { margin: 18px 0 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); }
.notes__list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.notes__list li { font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); }
.notes__list--acts { list-style: none; padding-left: 0; }
.notes__list--acts li { position: relative; padding: 10px 12px 10px 34px; border-radius: 12px;
  background: var(--violet-tint); color: var(--ink); }
.notes__list--acts li::before { content: ""; position: absolute; left: 12px; top: 13px; width: 13px; height: 13px;
  border-radius: 4px; border: 2px solid var(--violet); }
.notes__list--acts b { color: var(--violet-deep); }
.notes__topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
/* Says plainly when the names were worked out rather than recorded. */
.notes__warn { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fff4e5;
  border: 1px solid #ffd9a8; font-size: 0.82rem; line-height: 1.5; color: #8a5a12; }
.notes__src { margin: 0 0 10px; font-size: 0.76rem; color: var(--muted); }