@font-face {
      font-family: 'Martina Plantijn';
      src: url('TestMartinaPlantijn-Medium.otf') format('opentype');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'ABC ROM';
      src: url('ABCROMVariable-Trial.woff2') format('woff2-variations');
      font-weight: 100 900;
      font-style: normal;
      font-display: swap;
    }
    :root {
      --bg: #F0EFE7;
      --text: #000;
      --nav-gradient: linear-gradient(180deg, rgba(240, 239, 231, 0.94) 25%, rgba(240, 239, 231, 0.7) 65%, rgba(240, 239, 231, 0) 100%);
      --footer-gradient: linear-gradient(180deg, rgba(240, 239, 231, 0) 0%, rgba(240, 239, 231, 0.86) 57%, rgb(240, 239, 231) 71%);
    }
    [data-theme="dark"] {
      --bg: #191918;
      --text: #EEEEE6;
      --nav-gradient: linear-gradient(180deg, rgba(25, 25, 24, 0.94) 25%, rgba(25, 25, 24, 0.7) 65%, rgba(25, 25, 24, 0) 100%);
      --footer-gradient: linear-gradient(180deg, rgba(25, 25, 24, 0) 0%, rgba(25, 25, 24, 0.86) 57%, rgb(25, 25, 24) 71%);
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    
    html {
      background: var(--bg);
    }
    body {
      font-family: "Inter", sans-serif;
      font-style: normal;
      font-weight: 500;
      font-size: 16px;
      letter-spacing: -0.02em;
      line-height: 1.6em;
      color: var(--text);
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
      background: var(--bg);
      overflow-y: auto;
      transition: background 0.3s, color 0.3s;
    }
    a { color: inherit; text-decoration: none; }
    .mobile-br { display: none; }

    /* LAYOUT */
    .framer-page {
      min-height: 100vh;
      width: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    /* NAV */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      width: 100%;
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
      background: var(--nav-gradient);
    }
    .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
      width: calc(100% - 100px);
      max-width: 1300px;
      margin: 0 auto;
    }
    .logo-wrapper a {
      display: flex;
      align-items: center;
    }
    .logo-img {
      height: 22px;
      width: auto;
      display: block;
      transition: filter 0.3s;
    }
    [data-theme="dark"] .logo-img {
      filter: invert(1);
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 0;
    }
    .nav-link-wrapper {
      padding: 0;
    }
    .nav-link-wrapper:not(:last-child) {
      margin-right: 30px;
    }
    .nav-link {
      font-family: "Inter", sans-serif;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: -0.01em;
      line-height: 11px;
      color: var(--text);
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
    }
    .nav-link .chevron-down {
      width: 14px;
      height: 14px;
      transition: transform 0.2s ease;
    }
    .nav-dropdown-wrapper {
      position: relative;
    }
    .nav-dropdown-wrapper:hover .chevron-down {
      transform: rotate(180deg);
    }
    .nav-dropdown-wrapper::after {
      content: '';
      position: absolute;
      top: 100%;
      left: -40px;
      right: -40px;
      height: 20px;
    }
    .nav-dropdown::before {
      content: '';
      position: absolute;
      top: -20px;
      left: -20px;
      right: -20px;
      bottom: -10px;
      z-index: -1;
    }
    @keyframes dropdownIn {
      from {
        opacity: 0;
        transform: translateY(6px) scale(0.97);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    .nav-dropdown {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      background: #fff;
      border: 1px solid rgba(27, 23, 21, 0.08);
      border-radius: 10px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
      padding: 6px;
      opacity: 0;
      pointer-events: none;
      transform: translateY(4px);
      z-index: 100;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .nav-dropdown-wrapper:hover .nav-dropdown {
      pointer-events: auto;
      animation: dropdownIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    a.nav-dropdown-item {
      text-decoration: none;
      color: #1B1715;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      font-family: "Inter", sans-serif;
      font-size: 14px;
      font-weight: 450;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.15s ease;
      white-space: nowrap;
    }
    a.nav-dropdown-item:hover {
      background: rgba(27, 23, 21, 0.04);
    }
    a.nav-dropdown-item .dropdown-arrow {
      opacity: 0;
      transform: translateX(-4px);
      transition: opacity 0.15s ease, transform 0.15s ease;
      flex-shrink: 0;
    }
    a.nav-dropdown-item:hover .dropdown-arrow {
      opacity: 1;
      transform: translateX(0);
    }
    .theme-toggle {
      background: none;
      border: 1px solid var(--text);
      border-radius: 4px;
      cursor: pointer;
      padding: 4px 8px;
      margin-left: 12px;
      font-family: "Inter", sans-serif;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--text);
      opacity: 0.5;
      transition: opacity 0.2s;
    }
    .theme-toggle:hover {
      opacity: 1;
    }
    .logo-wrapper {
      display: flex;
      align-items: center;
    }

    /* MAIN CONTENT */
    .main-content {
      width: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      padding: 120px 40px 0 40px;
      box-sizing: border-box;
    }

    /* HERO SPLIT */
    .hero-split {
      display: flex;
      align-items: center;
      width: calc(100% - 100px);
      max-width: 1300px;
      gap: 48px;
      margin: 0 auto 0 auto;
    }

    /* HERO CENTERED (solutions pages) */
    .hero-centered {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      max-width: 800px;
      margin: 0 auto;
      padding: 60px 0 80px;
      gap: 20px;
    }
    .main-content:has(.hero-centered) {
      padding-left: 0;
      padding-right: 0;
    }
    .hero-centered-label {
      font-family: "Inter", sans-serif;
      font-size: 14px;
      font-weight: 500;
      color: rgba(27, 23, 21, 0.45);
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }
    .hero-centered .manifesto {
      text-align: center;
      font-size: 56px;
      line-height: 68px;
      max-width: 680px;
    }
    .hero-centered .manifesto-body {
      text-align: center;
      max-width: 560px;
    }
    .hero-centered .btn-row {
      justify-content: center;
      margin-top: 8px;
    }
    .hero-centered > * {
      opacity: 0;
      animation: fadeIn 0.5s ease forwards;
      animation-delay: calc(var(--i, 0) * 0.08s);
    }

    /* HERO MOBILE EMBED (hidden on desktop) */
    .hero-mobile-embed {
      display: none;
    }

    /* SHOWCASE SECTION */
    .showcase-section {
      width: 60%;
      flex-shrink: 1;
      margin: 0;
      position: relative;
      border-radius: 5px;
      overflow: hidden;
      aspect-ratio: 4 / 3;
      opacity: 0;
      transform: translateY(30px);
      animation: slideUp 0.7s ease forwards;
      animation-delay: calc(var(--i, 0) * 0.08s);
    }
    .showcase-canvas {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    .showcase-canvas img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    /* Hero intro overlay */
    .hero-intro {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(240, 239, 231, 0.85);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: 5px;
      opacity: 1;
      transition: opacity 0.5s ease;
    }
    .hero-intro.fade-out {
      opacity: 0;
      transform: translateY(-30px) scale(0.96);
      pointer-events: none;
      transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .hero-intro.hidden { display: none; }
    .hero-intro-center {
      position: relative;
      width: 420px;
      font-family: 'Inter', system-ui, sans-serif;
      font-weight: 450;
      -webkit-font-smoothing: antialiased;
      color: #1B1715;
    }
    .hero-intro-msg {
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 8px 40px rgba(0,0,0,0.10), 0 1.5px 6px rgba(0,0,0,0.04);
      padding: 18px 20px;
      width: 100%;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hero-intro-msg.show {
      opacity: 1;
      transform: translateY(0);
    }
    .hero-intro-msg-header {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .hero-intro-msg-avatar {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .hero-intro-msg-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .hero-intro-msg-name {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 16.5px;
      font-weight: 450;
      color: #1B1715;
    }
    .hero-intro-msg-expand {
      margin-top: 0;
      width: 100%;
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hero-intro-msg-expand.visible {
      margin-top: 14px;
    }
    .hero-intro-msg-body {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 15.5px;
      line-height: 1.6;
      color: #1B1715;
      font-weight: 400;
    }
    .hero-intro-msg-body .word {
      display: inline;
      opacity: 0;
      filter: blur(4px);
      transition: opacity 0.18s ease, filter 0.18s ease;
    }
    .hero-intro-msg-body .word.show {
      opacity: 1;
      filter: blur(0);
    }
    .hero-intro-msg-body .highlight {
      background: rgba(250, 204, 21, 0.25);
      padding: 1px 3px;
      border-radius: 3px;
    }
    .hero-intro-msg-body .highlight-blue {
      background: rgba(59, 130, 246, 0.12);
      padding: 1px 3px;
      border-radius: 3px;
    }
    .hero-intro-msg-body .highlight-gray {
      background: rgba(27, 23, 21, 0.08);
      padding: 1px 3px;
      border-radius: 3px;
    }
    .hero-intro-msg-expand-inner {
      position: relative;
    }
    .hero-intro-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }
    .hero-intro-pill-item {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px;
      font-size: 13.5px;
      font-weight: 450;
      color: #1B1715;
      background: #F8F6F3;
      border-radius: 100px;
      white-space: nowrap;
      opacity: 0;
      transform: scale(0.85);
      transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hero-intro-pill-item.show {
      opacity: 1;
      transform: scale(1);
    }
    .hero-intro-pill-check {
      width: 19px;
      height: 19px;
      flex-shrink: 0;
    }
    .hero-intro-pill-item.show .hero-intro-pill-check path {
      animation: heroIntroPillCheck 0.35s ease 0.15s forwards;
    }
    @keyframes heroIntroPillCheck {
      to { stroke-dashoffset: 0; }
    }
    .hero-intro-reply {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      opacity: 0;
      transform: translate(0, 60px);
      transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hero-intro-reply.show {
      opacity: 1;
      transform: translate(0, -50%);
    }
    .hero-intro-reply.slide-up {
      opacity: 0;
      transform: translate(0, -50%) translateY(-60px);
      transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
    }
    .hero-intro-msg.slide-up {
      transform: translateY(-60px);
      opacity: 0;
      transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
    }
    .hero-intro-reply .hero-intro-msg-avatar {
      width: 32px;
      height: 32px;
      background: #1B1715;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hero-intro-reply .hero-intro-msg-avatar img {
      width: 20px;
      height: 20px;
      object-fit: contain;
      filter: invert(1);
    }
    .hero-intro-reply-body {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 15.5px;
      line-height: 1.6;
      color: #1B1715;
      font-weight: 400;
      margin-top: 14px;
    }
    .hero-intro-reply-body .word {
      display: inline;
      opacity: 0;
      filter: blur(4px);
      transition: opacity 0.18s ease, filter 0.18s ease;
    }
    .hero-intro-reply-body .word.show {
      opacity: 1;
      filter: blur(0);
    }
    .app-shell.intro-hidden {
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    .app-shell.intro-visible {
      opacity: 1;
    }
    @media (max-width: 1099.98px) {
      .hero-intro { display: none; }
    }
    .showcase-screenshot {
      position: absolute;
      top: 7%;
      left: -15%;
      width: 96%;
      z-index: 2;
      overflow: visible;
      background: transparent;
      pointer-events: none;
      font-family: 'Inter', system-ui, sans-serif;
      font-weight: 450;
      -webkit-font-smoothing: antialiased;
      color: #1B1715;
    }

    /* ── APP REPLICA STYLES ── */
    .app-shell {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 1400px;
      height: 875px;
      overflow: visible;
      font-size: 13px;
      transform-origin: top left;
    }

    /* Sidebar - matches CompanyNavigation.tsx */
    .app-sidebar {
      width: 220px;
      min-width: 220px;
      background: #F0EEEB;
      display: flex;
      flex-direction: column;
    }
    /* Logo header - pl-5 pr-4 pt-5 pb-3 */
    .app-sidebar-logo {
      padding: 20px 16px 12px 20px;
    }
    /* Nav items wrapper - px-5 > -mx-2 */
    .app-sidebar-nav {
      padding: 0 20px;
      flex: 1;
    }
    .app-sidebar-nav-inner {
      margin: 0 -8px;
    }
    .app-sidebar-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4.8px 8px;
      border-radius: 6px;
      font-size: 14.5px;
      font-weight: 500;
      color: #1B1715;
      cursor: default;
      margin-bottom: 4px;
      white-space: nowrap;
    }
    .app-sidebar-item.active {
      background: #E6E1DB;
    }
    .app-sidebar-item .nav-icon {
      width: 14px; /* w-3.5 */
      height: 14px; /* h-3.5 */
      flex-shrink: 0;
    }
    .app-sidebar-badge {
      margin-left: auto;
      background: #E8E7E0;
      border-radius: 28px; /* rounded-full on small element */
      padding: 1px 6px;
      font-size: 11px;
      font-weight: 450;
      color: #999;
    }

    /* Main area - #F0EEEB background with padding for the white card */
    .app-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
      position: relative;
      overflow: hidden;
      background: #F0EEEB;
      padding: 15px 15px 15px 0;
    }

    /* White card - the big rounded container */
    .app-white-card {
      background: #fff;
      border-radius: 32px;
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-height: 0;
      position: relative;
    }

    /* Page header - px-12 pt-12 pb-6 */
    .app-page-header {
      padding: 48px 48px 24px 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .app-page-header-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .app-back-btn {
      width: 32px;
      height: 32px;
      background: #F5F3F0;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .app-page-title {
      font-size: 22px;
      font-weight: 500;
      color: #1B1715;
    }

    /* Tab pills in header - rounded-full, gap-1.5 */
    .app-tabs {
      display: flex;
      gap: 6px;
    }
    .app-tab {
      font-size: 14px;
      font-weight: 450;
      color: #1B1715;
      padding: 6px 12px;
      border-radius: 9999px;
      white-space: nowrap;
      background: transparent;
      cursor: pointer;
      transition: background-color 0.15s;
    }
    .app-tab:hover {
      background: rgba(27, 23, 21, 0.05);
    }
    .app-tab.active {
      background: #F0EEEB;
    }
    .app-tab.active:hover {
      background: #E8E6E1;
    }

    /* Candidates content - px-12 */
    .app-candidates {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 0 48px;
    }

    /* Review banner - mb-4 px-3 py-2 */
    .app-review-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      padding: 8px 12px;
      background: #FFFFFF;
      border: 0.69px solid rgba(27, 23, 21, 0.2);
      border-radius: 8px;
      font-size: 13.5px;
      font-weight: 450;
      color: #1B1715;
      box-shadow: 0 1px 2px rgba(27, 23, 21, 0.04);
    }
    .app-review-banner-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .app-review-banner-left svg {
      flex-shrink: 0;
    }
    .app-review-banner-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .app-review-btn-secondary {
      background: #fff;
      color: #1B1715;
      border: 1px solid rgba(27, 23, 21, 0.2);
      border-radius: 8px;
      padding: 4px 10px;
      font-size: 13px;
      font-weight: 450;
      font-family: 'Inter', system-ui, sans-serif;
    }
    .app-review-btn {
      background: #1B1715;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 4px 10px;
      font-size: 13px;
      font-weight: 450;
      font-family: 'Inter', system-ui, sans-serif;
    }

    /* Filter tabs - flex gap-6 border-b border-gray-200 */
    .app-filter-tabs {
      display: flex;
      gap: 24px;
      border-bottom: 1px solid #E5E7EB;
      margin-bottom: 12px;
    }
    .app-filter-tab {
      font-size: 14px;
      font-weight: 450;
      color: rgba(27, 23, 21, 0.5);
      padding-bottom: 12px;
      position: relative;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      transition: color 0.15s;
    }
    .app-filter-tab:hover {
      color: rgba(27, 23, 21, 0.8);
    }
    .app-filter-tab.active {
      color: #1B1715;
      font-weight: 450;
    }
    .app-filter-tab.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1.37px;
      background: #1B1715;
      border-radius: 9999px;
    }
    .app-filter-count {
      font-size: 12px;
      font-weight: 500;
      padding: 0px 6px;
      border-radius: 4px;
      background: rgba(27, 23, 21, 0.06);
      line-height: 1.5;
    }
    .app-filter-tab.active .app-filter-count {
      background: rgba(27, 23, 21, 0.1);
    }
    .app-filter-divider {
      width: 1px;
      background: #E5E7EB;
      margin: 8px 0;
      align-self: stretch;
    }

    /* Filter bar - flex items-center gap-2 mt-3, height: 34px */
    .app-search-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 12px;
      margin-bottom: 12px;
      height: 34px;
    }
    .app-filter-btn {
      height: 32px;
      padding: 0 10px;
      border: 1px solid rgba(27, 23, 21, 0.1);
      border-radius: 8px;
      font-size: 14px;
      font-weight: 450;
      color: #1B1715;
      background: #fff;
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      font-family: 'Inter', system-ui, sans-serif;
    }
    .app-filter-btn svg {
      width: 16px;
      height: 16px;
    }
    .app-search-input {
      height: 32px;
      border: 1px solid rgba(27, 23, 21, 0.1);
      border-radius: 8px;
      padding: 0 12px 0 32px;
      font-size: 14px;
      font-family: 'Inter', system-ui, sans-serif;
      font-weight: 450;
      color: rgba(27, 23, 21, 0.5);
      position: relative;
      display: flex;
      align-items: center;
      background: #fff;
      margin-left: auto;
      width: 200px;
    }

    /* Table - grid gap-4 py-2 px-4 */
    .app-table {
      flex: 1;
      overflow: hidden;
    }
    .app-table-header {
      display: grid;
      grid-template-columns: 1.4fr 1.3fr 1.1fr 0.85fr 0.8fr;
      gap: 16px;
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 450;
      color: rgba(27, 23, 21, 0.6);
    }
    .app-table-header span {
      padding: 4px 8px;
      margin-left: -8px;
      border-radius: 6px;
      width: fit-content;
    }
    .app-table-body {
      border: 0.69px solid rgba(27, 23, 21, 0.2);
      border-radius: 8px;
      overflow: hidden;
    }
    .app-table-row {
      display: grid;
      grid-template-columns: 1.4fr 1.3fr 1.1fr 0.85fr 0.8fr;
      gap: 16px;
      padding: 16px;
      align-items: center;
      background: #fff;
      border-bottom: 0.69px solid rgba(27, 23, 21, 0.08);
    }
    .app-table-row:last-child {
      border-bottom: none;
    }
    .app-table-row.selected {
      background: #FAFAF9;
    }
    .app-table-row.faded {
      opacity: 0.35;
    }

    /* Name cell - matches CandidatesTab row */
    .app-name-cell {
      display: flex;
      align-items: center;
      gap: 12px; /* gap-3 */
      min-width: 0;
    }
    .app-avatar {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 11px;
      font-weight: 500;
      background: #F5F3F0;
    }
    .app-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .app-name {
      font-weight: 450;
      font-size: 14px; /* text-sm */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .app-score-badge {
      flex-shrink: 0;
      border: 1px solid rgba(27, 23, 21, 0.15);
      border-radius: 6px; /* rounded-md */
      padding: 0px 4px; /* py-px px-1 */
      font-size: 11px;
      font-weight: 450;
      color: #1B1715;
      box-shadow: 0 1px 2px rgba(27, 23, 21, 0.04);
      margin-left: -6px; /* -ml-1.5 */
      line-height: 1.4;
    }

    /* Role cell */
    .app-role-cell {
      min-width: 0;
    }
    .app-role-title {
      font-size: 14px;
      font-weight: 450;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .app-role-company {
      font-size: 13px;
      font-weight: 450;
      color: rgba(27, 23, 21, 0.5);
      margin-top: 2px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .app-company-logo {
      width: 14px;
      height: 14px;
      border-radius: 3px;
      background: #E8E8E4;
      flex-shrink: 0;
      overflow: hidden;
    }
    .app-company-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Location cell */
    .app-location {
      font-size: 14px; /* text-sm */
      font-weight: 450;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Status pill - matches statusConfig render */
    .app-status {
      display: inline-flex;
      align-items: center;
      gap: 6px; /* gap-1.5 */
      padding: 0 6px; /* px-1.5 */
      border-radius: 9999px; /* rounded-full */
      font-size: 13.5px; /* matches actual fontSize */
      font-weight: 450;
    }
    .app-status-dot {
      width: 6px; /* w-1.5 */
      height: 6px; /* h-1.5 */
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* Sourced on */
    .app-date {
      font-size: 14px; /* text-sm */
      font-weight: 450;
    }

    /* ── OVERVIEW TAB ── */
    .app-overview {
      padding: 12px 48px 24px;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .app-metric-cards {
      display: flex;
      width: 100%;
      border: 0.69px solid rgba(27, 23, 21, 0.2);
      border-radius: 8px;
    }

    .app-metric-card {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      padding: 12px;
      min-height: 72px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-right: 0.69px solid rgba(27, 23, 21, 0.2);
    }

    .app-metric-card:last-child {
      border-right: none;
      position: relative;
    }

    .app-metric-label {
      font-size: 14px;
      font-weight: 450;
      color: rgba(27, 23, 21, 0.6);
      margin-bottom: 8px;
    }

    .app-metric-value {
      font-size: 24px;
      font-weight: 500;
      color: #1B1715;
      line-height: 1;
    }

    .app-metric-value .metric-sub {
      font-size: 13px;
      font-weight: 450;
      color: #D97706;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-left: 6px;
      vertical-align: bottom;
      padding-bottom: 2px;
    }

    .app-metric-value .metric-sub.green {
      color: #16A34A;
    }

    .app-metric-value .metric-sub svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }

    .app-metric-add-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border-radius: 6px;
      border: 1px solid rgba(27, 23, 21, 0.1);
    }

    .app-metric-add-btn svg {
      width: 14px;
      height: 14px;
    }

    /* Progress Chart */
    .app-progress-chart {
      border: 0.69px solid rgba(27, 23, 21, 0.2);
      border-radius: 8px;
      padding: 16px;
      padding-bottom: 0;
      margin-top: 16px;
    }

    .app-progress-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .app-progress-title {
      font-size: 14px;
      font-weight: 450;
      color: rgba(27, 23, 21, 0.6);
    }

    .app-progress-filter {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 8px;
      background: #fff;
      border: 1px solid rgba(27, 23, 21, 0.1);
      font-size: 14px;
      font-weight: 450;
      color: #1B1715;
      cursor: pointer;
    }

    .app-progress-filter svg {
      width: 16px;
      height: 16px;
    }

    /* Stacked bar chart */
    .app-chart-area {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: flex-end;
      gap: 6px;
    }

    .app-chart-bar-group {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;
      justify-content: flex-end;
    }

    .app-chart-stacked-bar {
      width: 100%;
      display: flex;
      flex-direction: column-reverse;
      border-radius: 4px 4px 0 0;
      overflow: hidden;
    }

    .app-chart-segment {
      width: 100%;
      min-height: 0;
    }

    .app-chart-segment.sourced { background: #CBD5E1; }
    .app-chart-segment.shortlisted { background: #93C5FD; }
    .app-chart-segment.inOutreach { background: #C4B5FD; }
    .app-chart-segment.interested { background: #5EEAD4; }
    .app-chart-segment.hires { background: #86EFAC; }

    .app-chart-label {
      font-size: 12px;
      color: rgba(27, 23, 21, 0.5);
      margin-top: 8px;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
    }

    .app-chart-x-labels {
      display: flex;
      gap: 6px;
      padding-bottom: 8px;
    }

    .app-chart-x-labels span {
      flex: 1;
      text-align: center;
      font-size: 12px;
      color: rgba(27, 23, 21, 0.5);
    }

    /* Response rate line overlay */
    .app-chart-line-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
    }

    /* Tasks Section */
    .app-tasks-section {
      padding-top: 16px;
    }

    .app-tasks-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
    }

    .app-tasks-title {
      font-size: 16px;
      font-weight: 500;
      color: #1B1715;
    }

    .app-tasks-count {
      padding: 2px 6px;
      border-radius: 4px;
      background: rgba(27, 23, 21, 0.1);
      font-size: 12px;
      font-weight: 500;
      color: #1B1715;
    }

    .app-tasks-list {
      border: 0.69px solid rgba(27, 23, 21, 0.2);
      border-radius: 8px;
      overflow: hidden;
    }

    .app-task-item {
      background: #fff;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 0.69px solid rgba(27, 23, 21, 0.08);
    }

    .app-task-item:last-child {
      border-bottom: none;
    }

    .app-task-left {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    .app-task-circle {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .app-task-info {}

    .app-task-role {
      font-size: 14px;
      font-weight: 400;
      color: rgba(27, 23, 21, 0.5);
      margin-bottom: 2px;
    }

    .app-task-desc {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .app-task-badge {
      padding: 0px 4px;
      border-radius: 6px;
      border: 1px solid rgba(27, 23, 21, 0.2);
      color: #1B1715;
      font-weight: 450;
      font-size: 11px;
      line-height: 1.4;
      box-shadow: 0 1px 2px rgba(27, 23, 21, 0.04);
      flex-shrink: 0;
    }

    .app-task-text {
      font-size: 14px;
      font-weight: 450;
      color: #1B1715;
    }

    .app-task-action {
      padding: 4px 10px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 450;
      color: #1B1715;
      border: 1px solid rgba(27, 23, 21, 0.2);
      background: #fff;
      cursor: pointer;
      flex-shrink: 0;
    }

    .app-task-action:hover {
      background: #FAFAF9;
    }

    /* ── DRAWER - matches CandidateDrawer.tsx ── */
    .app-drawer-overlay {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .app-drawer-backdrop {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.04);
      opacity: 0;
      animation: drawerFadeIn 0.4s ease 1.2s forwards;
    }
    .app-drawer {
      position: relative;
      width: 1000px;
      max-height: 96%;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 8px 60px rgba(0, 0, 0, 0.15), 0 2px 12px rgba(0, 0, 0, 0.06);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transform: translateY(40px);
      opacity: 0;
      animation: drawerFloatIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
    }
    @keyframes drawerSlideIn {
      from { transform: translateX(100%); }
      to { transform: translateX(0); }
    }
    @keyframes drawerFloatIn {
      from { transform: translateY(40px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    /* Action modal overlay */
    /* ── Hero shortlist toast ── */
    .hero-shortlist-toast {
      position: absolute;
      top: 16px; left: 16px;
      width: 414px;
      z-index: 20;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-8px) scale(0.97);
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
    }
    .hero-shortlist-toast.show {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    .app-drawer .app-drawer-header,
    .app-drawer .app-drawer-body-wrapper {
      transition: filter 0.4s ease, opacity 0.4s ease;
    }
    .app-drawer:has(.hero-shortlist-toast.show) .app-drawer-header,
    .app-drawer:has(.hero-shortlist-toast.show) .app-drawer-body-wrapper,
    .app-drawer:has(.hero-reply-toast.show) .app-drawer-header,
    .app-drawer:has(.hero-reply-toast.show) .app-drawer-body-wrapper {
      filter: blur(3px);
      opacity: 0.4;
    }
    .hero-shortlist-toast.slide-out {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    .hero-shortlist-toast.slide-out.fade-bg {
      opacity: 0;
      transform: translateY(-8px) scale(0.97);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    }
    .hero-shortlist-toast-card {
      display: flex;
      flex-direction: column;
      position: relative;
      width: 100%;
      padding: 18px 23px;
      background: #fff;
      border: 0.69px solid rgba(27, 23, 21, 0.15);
      border-radius: 16px;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    }
    .hero-shortlist-toast-header {
      display: flex;
      align-items: center;
      gap: 12px;
      white-space: nowrap;
      justify-content: flex-start;
    }
    .hero-shortlist-toast-check {
      width: 25px;
      height: 25px;
      flex-shrink: 0;
    }
    .hero-shortlist-toast-check svg {
      width: 25px;
      height: 25px;
    }
    .hero-shortlist-toast.show .hero-shortlist-toast-check {
      animation: checkPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
    }
    .hero-shortlist-toast-text {
      font-size: 17px;
      font-weight: 450;
      color: #1B1715;
    }
    .hero-shortlist-email-area {
      width: 100%;
      margin-top: 0;
      max-height: 0;
      overflow: hidden;
      position: relative;
      opacity: 0;
      transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease 0.1s, margin-top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hero-shortlist-email-area.visible {
      max-height: 300px;
      opacity: 1;
      margin-top: 12px;
    }
    .hero-shortlist-email-body {
      font-size: 16px;
      line-height: 1.5;
      color: #1B1715;
      font-weight: 400;
    }
    .hero-shortlist-email-body .word {
      display: inline;
      opacity: 0;
      filter: blur(4px);
      transition: opacity 0.18s ease, filter 0.18s ease;
    }
    .hero-shortlist-email-body .word.show {
      opacity: 1;
      filter: blur(0);
    }
    .hero-shortlist-email-body .highlight { background: rgba(245,158,11,0.12); border-radius: 3px; padding: 0 2px; }
    .hero-shortlist-email-body .highlight-blue { background: rgba(59,130,246,0.10); border-radius: 3px; padding: 0 2px; }
    .hero-shortlist-email-body .hero-bullet { display: block; padding-left: 16px; position: relative; margin-top: 4px; opacity: 0; transition: opacity 0.15s ease; }
    .hero-shortlist-email-body .hero-bullet.visible { opacity: 1; }
    .hero-shortlist-email-body .hero-bullet::before { content: '\2022'; position: absolute; left: 2px; color: rgba(27,23,21,0.35); }
    .hero-shortlist-email-body.sent-blur {
      filter: blur(3px);
      opacity: 0.3;
      transition: filter 0.4s ease, opacity 0.4s ease;
    }
    .hero-shortlist-sent {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 9px;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      font-size: 16px;
      font-weight: 450;
      color: #16a34a;
    }
    .hero-shortlist-sent.visible {
      opacity: 1;
    }
    .hero-shortlist-sent svg {
      width: 23px;
      height: 23px;
    }
    @keyframes checkPop {
      0% { transform: scale(0); }
      50% { transform: scale(1.2); }
      100% { transform: scale(1); }
    }

    /* Follow-up email areas (Profile 1) */
    .hero-followup-area {
      width: 100%;
      margin-top: 0;
      max-height: 0;
      overflow: hidden;
      position: relative;
      opacity: 0;
      transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease 0.1s, margin-top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hero-followup-area.visible {
      max-height: 300px;
      opacity: 1;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(27,23,21,0.08);
    }
    .hero-followup-label {
      font-size: 11px;
      font-weight: 500;
      color: rgba(27,23,21,0.4);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 6px;
    }

    /* ── Hero reject modal ── */
    .hero-reject-modal {
      position: absolute;
      top: 16px; left: 16px;
      width: 414px;
      z-index: 20;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-8px) scale(0.97);
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
    }
    .hero-reject-modal.show {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    .app-drawer:has(.hero-reject-modal.show) .app-drawer-header,
    .app-drawer:has(.hero-reject-modal.show) .app-drawer-body-wrapper {
      filter: blur(3px);
      opacity: 0.4;
    }
    .hero-reject-modal.slide-out {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    .hero-reject-modal.slide-out.fade-bg {
      opacity: 0;
      transform: translateY(-8px) scale(0.97);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    }
    .hero-reject-modal-card {
      display: flex;
      flex-direction: column;
      position: relative;
      width: 100%;
      padding: 18px 23px;
      background: #fff;
      border: 0.69px solid rgba(27, 23, 21, 0.15);
      border-radius: 16px;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    }
    .hero-reject-modal.show .hero-reject-modal-card {
      opacity: 1;
      transform: none;
    }
    .hero-reject-modal.slide-out .hero-reject-modal-card {
      opacity: 1;
      transform: none;
    }
    .hero-reject-modal-header {
      display: flex;
      align-items: center;
      gap: 12px;
      white-space: nowrap;
      justify-content: flex-start;
    }
    .hero-reject-modal-check {
      width: 25px;
      height: 25px;
      flex-shrink: 0;
    }
    .hero-reject-modal-check svg {
      width: 25px;
      height: 25px;
    }
    .hero-reject-modal.show .hero-reject-modal-check {
      animation: checkPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
    }
    .hero-reject-modal-text {
      font-size: 17px;
      font-weight: 450;
      color: #1B1715;
    }
    .hero-reject-feedback-area {
      width: 100%;
      margin-top: 12px;
      position: relative;
      min-height: 20px;
    }
    .hero-reject-feedback-body {
      font-size: 16px;
      line-height: 1.5;
      color: #1B1715;
      font-weight: 400;
    }
    .hero-reject-feedback-body .word {
      display: inline;
      opacity: 0;
      filter: blur(4px);
      transition: opacity 0.18s ease, filter 0.18s ease;
    }
    .hero-reject-feedback-body .word.show {
      opacity: 1;
      filter: blur(0);
    }
    .hero-reject-feedback-body .hero-bullet { display: block; padding-left: 16px; position: relative; margin-top: 4px; opacity: 0; transition: opacity 0.15s ease; }
    .hero-reject-feedback-body .hero-bullet.visible { opacity: 1; }
    .hero-reject-feedback-body .hero-bullet::before { content: '\2022'; position: absolute; left: 2px; color: rgba(27,23,21,0.35); }
    .hero-reject-feedback-body.sent-blur {
      filter: blur(3px);
      opacity: 0.3;
      transition: filter 0.4s ease, opacity 0.4s ease;
    }
    .hero-reject-sent {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 9px;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      font-size: 16px;
      font-weight: 450;
      color: #991B1B;
    }
    .hero-reject-sent.visible {
      opacity: 1;
    }
    .hero-reject-sent svg {
      width: 23px;
      height: 23px;
    }
    .hero-reject-sent.fade-out {
      opacity: 0;
    }
    .hero-reject-learning {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 9px;
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
      font-size: 16px;
      font-weight: 450;
    }
    .hero-reject-learning.visible {
      opacity: 1;
    }
    .hero-reject-learning svg {
      width: 18px;
      height: 18px;
      color: rgb(180,120,70);
      animation: sparkleSpin 3s ease-in-out infinite;
    }
    .hero-reject-learning.visible span {
      background: linear-gradient(90deg, rgba(180,120,70,0.6) 0%, rgba(180,120,70,0.6) 40%, rgba(180,120,70,0.2) 50%, rgba(180,120,70,0.6) 60%, rgba(180,120,70,0.6) 100%);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: textShimmer 3s ease-in-out infinite;
    }

    /* ── Hero candidate reply toast ── */
    .hero-reply-toast {
      position: absolute;
      top: 16px; right: 16px;
      width: 340px;
      z-index: 20;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-8px) scale(0.97);
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
    }
    .hero-reply-toast.show {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    .hero-reply-toast.collapse-out {
      max-height: 600px;
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: none;
      overflow: hidden;
      transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease 0.1s, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .hero-reply-toast.collapse-out.collapsed {
      max-height: 0;
      opacity: 0;
      transform: translateY(-12px) scale(0.97);
    }
    .hero-reply-toast-card {
      display: flex;
      flex-direction: column;
      position: relative;
      width: 100%;
      padding: 18px 23px;
      background: #fff;
      border: 0.69px solid rgba(27, 23, 21, 0.15);
      border-radius: 16px;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    }
    .hero-reply-candid-card {
      margin-top: 8px;
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      transform: translateY(-4px);
      transition: opacity 0.3s ease, max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease;
    }
    .hero-reply-candid-card.visible {
      opacity: 1;
      max-height: 300px;
      transform: translateY(0);
    }
    .hero-reply-toast-header {
      display: flex;
      align-items: center;
      gap: 12px;
      white-space: nowrap;
      justify-content: flex-start;
    }
    .hero-reply-toast-avatar {
      width: 25px;
      height: 25px;
      border-radius: 7px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .hero-reply-toast-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .hero-reply-toast-avatar svg {
      display: block;
    }
    .hero-reply-toast-name {
      font-size: 17px;
      font-weight: 450;
      color: #1B1715;
    }
    .hero-reply-via {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
    }
    .hero-reply-via span {
      font-size: 13px;
      font-weight: 400;
      color: rgba(27,23,21,0.4);
      line-height: 1;
    }
    .hero-reply-toast-body {
      font-size: 16px;
      line-height: 1.5;
      color: #1B1715;
      font-weight: 400;
      min-height: 0;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease 0.1s, margin-top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hero-reply-toast-body.visible {
      max-height: 200px;
      opacity: 1;
      margin-top: 12px;
    }
    .hero-reply-toast-body .word {
      display: inline;
      opacity: 0;
      filter: blur(4px);
      transition: opacity 0.18s ease, filter 0.18s ease;
    }
    .hero-reply-toast-body .word.show {
      opacity: 1;
      filter: blur(0);
    }
    .hero-reply-pill {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 9px;
      margin-top: 8px;
      width: 100%;
      padding: 14px 18px;
      position: relative;
      overflow: hidden;
      background: #fff;
      border: 0.69px solid rgba(27,23,21,0.12);
      border-radius: 16px;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hero-reply-pill.show {
      opacity: 1;
      transform: translateY(0);
    }
    .hero-reply-pill.show {
      animation: heroReplyPillGlow 1.2s ease 0.2s both;
    }
    @keyframes heroReplyPillGlow {
      0% { background: rgba(37,99,235,0.06); }
      100% { background: #fff; }
    }
    .hero-reply-pill span {
      font-size: 16px;
      font-weight: 450;
      color: #1B1715;
    }
    .hero-reply-pill-check {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
    }
    .hero-reply-pill.show .hero-reply-pill-check path {
      animation: calCheckDraw 0.35s ease 0.2s forwards;
    }

    /* Profile slide transitions */
    .app-drawer-body-wrapper {
      position: relative;
      flex: 1;
      overflow: hidden;
    }
    .app-profile {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
      transform: translateX(100%);
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
      pointer-events: none;
    }
    .app-profile.active {
      position: relative;
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
    }
    .app-profile.slide-out-left {
      position: absolute;
      opacity: 0;
      transform: translateX(-100%);
    }
    .app-profile.slide-in-right {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
    }

    /* Shimmer-in: staggered content load when profile appears */
    @keyframes contentFadeUp {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .shimmer-child {
      opacity: 0;
    }
    .shimmer-child.visible {
      animation: contentFadeUp 0.3s ease forwards;
    }

    @keyframes drawerFadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* Hide hero drawer header on desktop */
    .app-drawer:not(.mini-drawer) > .app-drawer-header {
      display: none;
    }

    /* Drawer header - px-6 py-4 */
    .app-drawer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 24px; /* py-4 px-6 */
      border-bottom: 1px solid rgba(27, 23, 21, 0.1);
      flex-shrink: 0;
    }
    .app-drawer-header-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .app-drawer-close {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 1px solid rgba(27, 23, 21, 0.1);
      pointer-events: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      cursor: pointer;
      transition: background-color 0.15s, border-color 0.15s;
    }
    .app-drawer-close:hover {
      background: #F5F3F0;
      border-color: rgba(27, 23, 21, 0.2);
    }
    .app-drawer-close:active {
      background: #ECEAE6;
      border-color: rgba(27, 23, 21, 0.25);
      transform: scale(0.95);
    }
    .app-drawer-role-badge {
      padding: 0 10px; /* px-2.5 */
      height: 32px; /* h-8 */
      border-radius: 8px; /* rounded-lg */
      border: 1px solid rgba(27, 23, 21, 0.1);
      font-size: 14px; /* text-sm */
      font-weight: 450;
      color: #1B1715;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
    }
    .app-drawer-role-badge span {
    }

    /* Drawer action buttons - px-2.5 h-8 rounded-lg text-sm */
    .app-drawer-header-right {
      display: flex;
      align-items: center;
      gap: 8px; /* gap-2 */
    }
    .app-drawer-action {
      padding: 0 10px;
      height: 32px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 450;
      display: flex;
      align-items: center;
      gap: 4px;
      background: #fff;
      cursor: pointer;
      transition: background-color 0.15s, border-color 0.15s;
    }
    .app-drawer-action {
      pointer-events: auto;
      cursor: pointer;
    }
    .app-drawer-action:hover {
      background: #F5F3F0;
    }
    .app-drawer-action.shortlist-btn:hover,
    .app-drawer-action.shortlist-btn.pressing,
    .app-drawer-action.mini-shortlist-btn:hover,
    .app-drawer-action.mini-shortlist-btn.pressing {
      background: rgba(34, 197, 94, 0.08);
      border-color: rgba(34, 197, 94, 0.7) !important;
    }
    .app-drawer-action.shortlist-btn.pressed,
    .app-drawer-action.mini-shortlist-btn.pressed {
      background: rgba(34, 197, 94, 0.15);
      border-color: #22C55E !important;
      transform: scale(0.96);
      transition: transform 0.1s ease, background 0.1s ease;
    }
    .app-drawer-action.reject-btn:hover,
    .app-drawer-action.reject-btn.pressing,
    .app-drawer-action.mini-reject-btn:hover,
    .app-drawer-action.mini-reject-btn.pressing {
      background: rgba(239, 68, 68, 0.08);
      border-color: rgba(239, 68, 68, 0.7) !important;
    }
    .app-drawer-action.reject-btn.pressed,
    .app-drawer-action.mini-reject-btn.pressed {
      background: rgba(239, 68, 68, 0.15);
      border-color: #EF4444 !important;
      transform: scale(0.96);
      transition: transform 0.1s ease, background 0.1s ease;
    }
    .app-drawer-action.later-btn:hover {
      background: rgba(245, 158, 11, 0.08);
      border-color: rgba(245, 158, 11, 0.7) !important;
    }
    .app-drawer-action .kbd {
      width: 16px; /* w-4 */
      height: 16px; /* h-4 */
      font-size: 10px; /* text-[10px] */
      font-weight: 500;
      border-radius: 4px;
      background: #E6E1DB;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: SFMono-Regular, Consolas, Liberation Mono, monospace;
    }
    .app-drawer-nav {
      display: flex;
      align-items: center;
      gap: 4px; /* gap-1 */
    }
    .app-drawer-nav-btn {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 1px solid rgba(27, 23, 21, 0.1);
      pointer-events: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      cursor: pointer;
      transition: background-color 0.15s, border-color 0.15s;
    }
    .app-drawer-nav-btn:hover {
      background: #F5F3F0;
      border-color: rgba(27, 23, 21, 0.2);
    }
    .app-drawer-nav-btn:active {
      background: #ECEAE6;
      border-color: rgba(27, 23, 21, 0.25);
      transform: scale(0.95);
    }
    .app-drawer-nav-count {
      display: none;
    }

    /* Drawer body - gap-4 px-6 */
    .app-drawer-body {
      flex: 1;
      display: flex;
      gap: 16px; /* gap-4 */
      min-height: 0;
      padding: 0 24px; /* px-6 */
      zoom: 1.05;
    }

    /* Drawer left col - w-[60%] */
    .app-drawer-left {
      width: 60%;
      padding: 24px 8px 24px 0; /* pt-6 pr-2 */
      overflow: hidden;
    }

    /* Candidate header - gap-5 mb-6 */
    .app-candidate-header {
      display: flex;
      gap: 20px; /* gap-5 */
      margin-bottom: 24px; /* mb-6 */
    }
    .app-candidate-avatar {
      width: 64px;
      height: 64px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 20px;
      font-weight: 500;
      background: #F5F3F0;
      overflow: hidden;
    }
    .app-candidate-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .app-candidate-info {
      flex: 1;
      min-width: 0;
    }
    .app-candidate-name-row {
      display: flex;
      align-items: center;
      gap: 8px; /* gap-2 */
      margin-bottom: 2px; /* mb-0.5 */
    }
    .app-candidate-name {
      font-size: 18px; /* fontSize: '18px' */
      font-weight: 500;
    }
    .app-candidate-score {
      width: 28px; /* w-7 */
      height: 28px; /* h-7 */
      border-radius: 50%; /* rounded-full */
      border: 1px solid rgba(27, 23, 21, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 500;
      background: #fff;
    }
    .app-candidate-title {
      font-size: 15px;
      color: rgba(27, 23, 21, 0.7);
    }
    .app-candidate-location {
      font-size: 13px; /* fontSize: '13px' */
      color: rgba(27, 23, 21, 0.5);
    }
    .app-candidate-links {
      display: flex;
      gap: 4px; /* gap-1 */
      flex-shrink: 0;
      align-self: flex-start;
    }
    .app-link-btn {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 1px solid rgba(27, 23, 21, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      cursor: pointer;
      transition: background-color 0.15s, border-color 0.15s;
    }
    .app-link-btn:hover {
      background: #F5F3F0;
      border-color: rgba(27, 23, 21, 0.2);
    }

    /* Drawer tabs - gap-6 */
    .app-drawer-tabs {
      display: flex;
      gap: 24px; /* gap-6 */
      border-bottom: 1px solid rgba(27, 23, 21, 0.1);
      margin-bottom: 24px; /* mb-6 */
    }
    .app-drawer-tab {
      font-size: 14px;
      font-weight: 450;
      color: rgba(27, 23, 21, 0.5);
      padding-bottom: 12px;
      position: relative;
      white-space: nowrap;
      cursor: pointer;
      transition: color 0.15s;
    }
    .app-drawer-tab:hover {
      color: rgba(27, 23, 21, 0.8);
    }
    .app-drawer-tab.active {
      color: #1B1715;
      font-weight: 450;
    }
    .app-drawer-tab.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1.37px;
      background: #1B1715;
      border-radius: 9999px;
    }

    /* Profile content - summary placeholder */
    .app-summary-lines {
      margin-bottom: 24px; /* mb-6 */
    }
    .app-summary-line {
      height: 10px;
      background: #EDECE6;
      border-radius: 4px;
      margin-bottom: 8px;
    }

    .app-section-title {
      font-size: 15px; /* fontSize: '15px' */
      font-weight: 500;
      margin-bottom: 12px; /* marginBottom: '0.75rem' */
    }

    /* Experience items - gap-3 */
    .app-exp-item {
      display: flex;
      gap: 12px; /* gap-3 */
      margin-bottom: 12px;
    }
    .app-exp-logo {
      width: 40px; /* w-10 */
      height: 40px; /* h-10 */
      border-radius: 6px; /* rounded-md */
      background: #F5F3F0;
      border: 1px solid rgba(27, 23, 21, 0.1);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 15px; /* fontSize: '15px' */
      font-weight: 500;
      color: #1B1715;
    }
    .app-exp-info {
      min-width: 0;
    }
    .app-exp-role {
      font-size: 15px; /* fontSize: '15px' */
      font-weight: 500;
    }
    .app-exp-dates {
      font-size: 13.5px; /* fontSize: '13.5px' */
      color: rgba(27, 23, 21, 0.5);
    }

    /* Skills - rounded-md px-2 py-1 */
    .app-skills {
      display: flex;
      flex-wrap: wrap;
      gap: 4px; /* gap-1 */
    }
    .app-skill {
      background: #F5F3F0;
      border-radius: 6px; /* rounded-md */
      padding: 1px 8px;
      font-size: 12px; /* fontSize: '12px' */
      font-weight: 450;
    }

    /* Drawer right col - w-[40%] */
    .app-drawer-right {
      width: 40%;
      padding: 24px 0 24px 8px; /* pt-6 pl-2 */
      overflow: hidden;
    }

    .app-fit-lines {
      margin-bottom: 24px; /* mb-6 */
    }
    .app-fit-line {
      height: 10px;
      background: #EDECE6;
      border-radius: 4px;
      margin-bottom: 8px;
    }

    /* Scorecard - matches actual scorecard items */
    .app-scorecard-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      background: #fff;
      font-size: 14px;
      font-weight: 450;
    }
    .app-scorecard-pill {
      padding: 2px 10px;
      border-radius: 100px;
      font-size: 12px;
      font-weight: 500;
      white-space: nowrap;
    }
    .app-scorecard-pill.strong {
      background: #DCFCE7;
      color: #166534;
    }
    .app-scorecard-pill.good {
      background: #FEF3C7;
      color: #92400E;
    }

    /* Shimmer lines for descriptions */
    .app-shimmer {
      height: 10px;
      background: #EDECE6;
      border-radius: 4px;
      margin-bottom: 6px;
    }
    .app-exp-info .app-shimmer,
    .app-exp-grouped-role .app-shimmer {
      width: 253px !important;
    }
    .app-exp-info .app-shimmer:last-child,
    .app-exp-grouped-role .app-shimmer:last-child {
      width: 196px !important;
    }

    /* Experience logo with real image */
    .app-exp-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 6px;
    }

    /* Grouped multi-role timeline */
    .app-exp-grouped-roles {
      display: flex;
      flex-direction: column;
    }
    .app-exp-grouped-role {
      position: relative;
      padding-left: 12px;
    }
    .app-exp-grouped-role .exp-dot {
      position: absolute;
      left: 0;
      top: 7px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(27, 23, 21, 0.3);
    }
    .app-exp-grouped-role .exp-line {
      position: absolute;
      left: 2.5px;
      top: 14px;
      bottom: 0;
      width: 1px;
      background: rgba(27, 23, 21, 0.15);
    }
    .app-exp-grouped-role-title {
      font-size: 14px;
      font-weight: 450;
      color: #1B1715;
    }
    .app-exp-grouped-role-dates {
      font-size: 13.5px;
      color: rgba(27, 23, 21, 0.5);
    }

    /* TEXT CONTENT - LEFT SIDE */
    .text-content {
      position: relative;
      z-index: 2;
      width: 40%;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      text-align: left;
    }
    .text-header {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 10px;
      width: 100%;
      padding: 0;
      position: relative;
    }
    .text-inner {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 24px;
      width: 100%;
      position: relative;
    }
    @keyframes fadeIn {
      to {
        opacity: 1;
      }
    }
    @keyframes slideUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .text-inner > * {
      opacity: 0;
      animation: fadeIn 0.5s ease forwards;
      animation-delay: calc(var(--i, 0) * 0.08s);
    }
    .inline-slack-icon {
      display: inline-block;
      vertical-align: middle;
      position: relative;
      top: -1px;
    }
    .hero-preview-pill {
      display: inline-flex;
      align-items: center;
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      font-weight: 500;
      color: #A3906F;
      background: rgba(163, 144, 111, 0.1);
      border: 1px solid rgba(163, 144, 111, 0.2);
      border-radius: 100px;
      padding: 4px 14px;
      margin-bottom: 12px;
    }
    .manifesto {
      font-family: "Inter", sans-serif;
      font-style: normal;
      font-weight: 500;
      font-size: 60px;
      letter-spacing: 0;
      line-height: 78px;
      color: var(--text);
      width: 100%;
      margin-bottom: 0;
      text-align: left;
    }
    .signature-word {
      font-family: "Lora", Georgia, serif;
      font-weight: 500;
      font-style: italic;
      font-size: 1.05em;
      display: inline-block;
      position: relative;
      top: -1px;
      color: var(--text);
    }
    [data-theme="dark"] .signature-word {
      color: #ccc;
    }
    [data-theme="dark"] .manifesto-body {
      color: #999;
    }
    .shimmer {
      background: linear-gradient(
        120deg,
        var(--text) 0%,
        var(--text) 35%,
        #B8956A 45%,
        #B8956A 55%,
        var(--text) 65%,
        var(--text) 100%
      );
      background-size: 200% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: shimmer 3.6s linear infinite;
    }
    @keyframes shimmer {
      0% {
        background-position: 200% 0;
      }
      100% {
        background-position: -200% 0;
      }
    }
    .manifesto-body {
      font-family: "Inter", sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 19px;
      color: rgba(27, 23, 21, 0.5);
      letter-spacing: 0;
      line-height: 26px;
      width: 100%;
      max-width: 480px;
      margin-bottom: 0;
    }
    .info-hint {
      text-decoration: underline dotted;
      text-underline-offset: 3px;
      text-decoration-color: #999;
      cursor: help;
      position: relative;
    }
    .info-hint::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      background: var(--text);
      color: var(--bg);
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.4;
      padding: 8px 12px;
      border-radius: 6px;
      white-space: normal;
      width: 240px;
      text-align: center;
      pointer-events: none;
      z-index: 10;
      opacity: 0;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .info-hint:hover::after {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    .info-hint::before {
      content: '';
      position: absolute;
      bottom: calc(100% + 2px);
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      border: 5px solid transparent;
      border-top-color: var(--text);
      z-index: 10;
      opacity: 0;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .info-hint:hover::before {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* LOGOS SECTION */
    .logos-section {
      width: calc(100% - 100px);
      max-width: 1350px;
      margin: 0 auto 24px auto;
      text-align: center;
      opacity: 0;
      transform: translateY(30px);
      animation: slideUp 0.7s ease forwards;
      animation-delay: calc(var(--i, 0) * 0.08s);
    }
    .logos-title {
      font-family: "Inter", sans-serif;
      font-size: 14px;
      font-weight: 450;
      color: var(--text);
      letter-spacing: 0;
      margin-bottom: 32px;
    }
    .logos-carousel {
      position: relative;
      overflow: hidden;
      width: 100%;
      max-width: 700px;
      margin: 0 auto;
      mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
    }
    .logos-track {
      display: flex;
      align-items: center;
      gap: 48px;
      width: max-content;
      animation: scrollLogos 20s linear infinite;
    }
    @keyframes scrollLogos {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .logo-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .partner-logo {
      height: 20px;
      width: auto;
      opacity: 0.5;
      transition: opacity 0.2s;
    }
    .partner-logo:hover {
      opacity: 0.8;
    }
    [data-theme="dark"] .partner-logo {
      filter: invert(1);
    }
    [data-theme="dark"] .logos-title {
      color: #666;
    }
    .logos-section-hero {
      width: 100%;
      max-width: none;
      margin: 24px auto 0 auto;
    }

    /* ROCKET IMAGE - RIGHT SIDE */
    .rocket-img {
      position: relative;
      height: auto;
      max-height: 60vh;
      width: 50%;
      z-index: 1;
      pointer-events: none;
      opacity: 0;
      animation: rocketFadeIn 1.2s ease forwards;
      animation-delay: 0.5s;
      object-fit: contain;
    }
    @keyframes rocketFadeIn {
      to {
        opacity: 0.9;
      }
    }

    /* Mobile menu */
    .mobile-menu-btn {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      color: var(--text);
    }
    .mobile-menu {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(236, 234, 227, 0.7);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      z-index: 200;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      display: flex;
      flex-direction: column;
    }
    [data-theme="dark"] .mobile-menu {
      background: rgba(26, 26, 26, 0.7);
    }
    .mobile-menu.active {
      opacity: 1;
      visibility: visible;
    }
    .mobile-menu-close {
      position: absolute;
      top: 15px;
      right: 20px;
      background: none;
      border: 1px solid var(--text);
      border-radius: 4px;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--text);
    }
    .mobile-menu-close svg {
      width: 20px;
      height: 20px;
    }
    .mobile-menu-links {
      display: flex;
      flex-direction: column;
      padding: 80px 20px 40px 20px;
      gap: 6px;
    }
    .mobile-menu-link {
      font-family: "Inter", sans-serif;
      font-size: 24px;
      font-weight: 450;
      color: var(--text);
      text-decoration: none;
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
      padding: 8px 0;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .mobile-menu.active .mobile-menu-link {
      opacity: 1;
      transform: translateY(0);
    }
    .mobile-menu.active .mobile-menu-link:nth-child(1) {
      transition-delay: 0.08s;
    }
    .mobile-menu.active .mobile-menu-link:nth-child(2) {
      transition-delay: 0.14s;
    }
    .mobile-menu.active .mobile-menu-link:nth-child(3) {
      transition-delay: 0.2s;
    }
    .mobile-menu.active .mobile-menu-link:nth-child(4) {
      transition-delay: 0.26s;
    }
    .mobile-menu.active .mobile-menu-link:nth-child(5) {
      transition-delay: 0.32s;
    }
    .mobile-menu-footer {
      display: flex;
      flex-direction: column;
      padding: 0 20px;
      gap: 6px;
      margin-top: 24px;
    }
    .mobile-menu-footer-link {
      font-family: "Inter", sans-serif;
      font-size: 24px;
      font-weight: 450;
      color: var(--text);
      text-decoration: none;
      padding: 8px 0;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .mobile-menu.active .mobile-menu-footer-link:nth-child(1) {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.26s;
    }
    .mobile-menu.active .mobile-menu-footer-link:nth-child(2) {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.32s;
    }
    .mobile-menu.active .mobile-menu-footer-link:nth-child(3) {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.38s;
    }
    .mobile-menu.active .mobile-menu-footer-link:nth-child(4) {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.44s;
    }
    .mobile-menu.active .mobile-menu-footer-link:nth-child(5) {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.50s;
    }
    .mobile-menu-socials {
      display: flex;
      gap: 16px;
      margin-top: 24px;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      transition-delay: 0.56s;
    }
    .mobile-menu.active .mobile-menu-socials {
      opacity: 1;
      transform: translateY(0);
    }
    .mobile-menu-social {
      width: 22px;
      height: 22px;
      color: var(--text);
      opacity: 0.5;
      transition: opacity 0.2s;
    }
    .mobile-menu-social:hover {
      opacity: 1;
    }
    .mobile-menu-social svg {
      width: 100%;
      height: 100%;
    }
    .btn-row {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 16px;
      margin-top: 16px;
    }
    .hero-email-row {
      display: inline-flex;
      align-items: center;
      background: var(--bg);
      border: 1px solid rgba(27, 23, 21, 0.12);
      border-radius: 1000px;
      padding: 4px 4px 4px 18px;
      gap: 8px;
      cursor: text;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .hero-email-row:focus-within {
      border-color: rgba(128, 128, 128, 0.6);
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }
    .hero-email-input {
      border: none;
      outline: none;
      background: transparent;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0;
      color: var(--text);
      width: 210px;
      flex: 1;
    }
    .hero-email-input::placeholder {
      color: rgba(27, 23, 21, 0.35);
    }
    .hero-email-row .join-btn {
      flex-shrink: 0;
    }
    .join-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      height: 38px;
      padding: 7px 16px;
      background-color: #A3A498;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 1000px;
      border: none;
      font-family: "Inter", sans-serif;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: rgb(244, 244, 238);
      text-decoration: none;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    .join-btn:hover {
      background-color: rgba(163, 164, 152, 0.8);
    }
    [data-theme="dark"] .join-btn {
      background-color: #EEEEE6;
      color: #191918;
    }
    [data-theme="dark"] .join-btn:hover {
      background-color: rgba(238, 238, 230, 0.85);
    }

    /* ── FEATURE SECTIONS ── */
    .feature-sections {
      width: calc(100% - 100px);
      max-width: 1300px;
      margin: 0 auto;
      padding: 40px 0 100px;
      display: flex;
      flex-direction: column;
      gap: 120px;
    }
    .feature-row {
      display: flex;
      align-items: center;
      gap: 60px;
      opacity: 0;
      transform: translateY(30px);
    }
    .feature-row.has-bg {
      background: rgba(219, 211, 200, 0.25);
      border-radius: 5px;
      padding: 48px;
    }
    .feature-row.has-frame {
      padding: 0 48px;
    }
    .feature-row.visible {
      animation: slideUp 0.7s ease forwards;
    }
    .feature-row.reversed {
      flex-direction: row-reverse;
    }
    .feature-text {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .feature-label {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0;
      color: #999;
    }
    [data-theme="dark"] .feature-label {
      color: rgba(238, 238, 230, 0.4);
    }
    .feature-title {
      font-family: 'Inter', sans-serif;
      font-size: 34px;
      font-weight: 500;
      letter-spacing: 0;
      line-height: 1.2;
      color: var(--text);
    }
    .feature-body {
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.6;
      color: #555;
      max-width: 80%;
    }
    [data-theme="dark"] .feature-body {
      color: #999;
    }
    .email-coverage-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 3px;
      position: relative;
    }
    .email-coverage-label {
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      font-weight: 500;
      color: #1B1715;
      text-decoration: underline dotted rgba(27, 23, 21, 0.35);
      text-decoration-thickness: 1.5px;
      text-underline-offset: 4px;
      cursor: help;
    }
    [data-theme="dark"] .email-coverage-label {
      color: #EEEEE6;
      text-decoration-color: rgba(238, 238, 230, 0.35);
    }
    .email-coverage-icon {
      flex-shrink: 0;
      position: relative;
      top: -0.5px;
    }
    .email-coverage-tooltip {
      position: absolute;
      bottom: calc(100% + 8px);
      left: 0;
      z-index: 100;
      opacity: 0;
      visibility: hidden;
      transform: translateY(4px);
      transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
      pointer-events: none;
    }
    .email-coverage-badge:hover .email-coverage-tooltip {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }
    .email-coverage-tooltip-content {
      display: block;
      background: #111;
      color: #fff;
      font-family: 'Inter', sans-serif;
      font-size: 12.5px;
      font-weight: 400;
      line-height: 1.55;
      letter-spacing: -0.01em;
      padding: 8px 12px;
      border-radius: 8px;
      white-space: normal;
      max-width: 300px;
      width: max-content;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }
    .email-coverage-tooltip-content::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 20px;
      border: 5px solid transparent;
      border-top-color: #111;
    }
    .feature-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      align-self: flex-start;
      width: auto;
      gap: 0;
      height: 38px;
      padding: 0 16px;
      background-color: #1B1715;
      border-radius: 10px;
      border: none;
      font-family: "Inter", sans-serif;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: #F4F4EE;
      cursor: pointer;
      white-space: nowrap;
      transition: opacity 0.15s, box-shadow 0.2s ease;
      margin-top: 4px;
    }
    .feature-btn .btn-arrow {
      display: inline-flex;
      align-items: center;
      width: 0;
      opacity: 0;
      overflow: hidden;
      margin-left: 0;
      transition: width 0.25s ease, opacity 0.25s ease, margin-left 0.25s ease;
    }
    .feature-btn:hover .btn-arrow {
      width: 18px;
      opacity: 1;
      margin-left: 6px;
    }
    .feature-btn:hover {
      opacity: 0.85;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    .feature-text .feature-btn,
    .feature-btn-white {
      background: #fff;
      border: 1px solid rgba(27, 23, 21, 0.15);
      color: var(--text);
      height: 38px;
      padding: 0 16px;
      font-size: 14px;
    }
    .feature-text .feature-btn:hover,
    .feature-btn-white:hover {
      opacity: 1;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    [data-theme="dark"] .feature-btn {
      background-color: #EEEEE6;
      color: #191918;
    }
    [data-theme="dark"] .feature-btn:hover {
      opacity: 0.85;
    }
    [data-theme="dark"] .feature-text .feature-btn {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.15);
      color: #ccc;
    }
    .feature-painting {
      flex: 1;
      position: relative;
      border-radius: 5px;
      overflow: hidden;
      aspect-ratio: 4 / 3;
    }
    .feature-painting img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .feature-painting::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(240, 239, 231, 0.85);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 1;
    }
    .feature-embed {
      position: absolute;
      top: 8%;
      left: 50%;
      transform: translateX(-50%);
      width: 85%;
      z-index: 3;
      pointer-events: none;
      font-family: 'Inter', system-ui, sans-serif;
      font-weight: 450;
      -webkit-font-smoothing: antialiased;
      color: #1B1715;
    }

    /* Feature embed cards */
    .feature-card {
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
      overflow: hidden;
      font-size: 13px;
    }
    .feature-card-header {
      padding: 14px 18px;
      border-bottom: 1px solid rgba(27, 23, 21, 0.08);
      font-size: 15px;
      font-weight: 500;
      color: #1B1715;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .feature-card-body {
      padding: 14px 18px;
    }
    .feature-card-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid rgba(27, 23, 21, 0.06);
      font-size: 13px;
      font-weight: 450;
      color: #1B1715;
    }
    .feature-card-row:last-child {
      border-bottom: none;
    }
    .feature-card-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .feature-card-badge {
      margin-left: auto;
      font-size: 11px;
      font-weight: 500;
      padding: 2px 8px;
      border-radius: 9999px;
    }

    /* ── CALIBRATION EMBED ── */
    .cal-embed {
      position: relative;
      width: 100%;
    }
    .cal-phase { position: relative; }
    .cal-phase-prefs { display: flex; flex-direction: column; gap: 10px; transition: opacity 0.35s ease; }
    .cal-phase-prefs .cal-pref-card { transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease, border-color 0.3s ease; }
    .cal-phase-prefs.stack .cal-pref-card { box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
    .cal-phase-prefs.sweep { transform: translateY(-130%); opacity: 0; transition: transform 0.45s cubic-bezier(0.55,0,1,0.45), opacity 0.3s ease 0.15s; }
    @keyframes calCardIn {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .cal-pref-card {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 14px;
      background: #fff;
      border: none;
      border-radius: 10px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.02);
      opacity: 0;
      animation: calCardIn 0.4s ease forwards;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .cal-pref-card.checked {
      box-shadow: 0 1px 3px rgba(22,101,52,0.06), 0 4px 12px rgba(22,101,52,0.03);
    }
    .cal-pref-card[data-cal-idx="0"] { animation-delay: 0.3s; }
    .cal-pref-card[data-cal-idx="1"] { animation-delay: 0.6s; }
    .cal-pref-card[data-cal-idx="2"] { animation-delay: 0.9s; }
    .cal-pref-card[data-cal-idx="3"] { animation-delay: 1.2s; }
    .cal-pref-card[data-cal-idx="4"] { animation-delay: 1.5s; }
    .cal-pref-card[data-cal-idx="5"] { animation-delay: 1.8s; }
    .cal-pref-icon {
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .cal-pref-icon svg {
      width: 20px; height: 20px;
    }
    .cal-pref-title { font-size: 15px; font-weight: 450; color: #1B1715; flex: 1; }
    .cal-pref-card.cal-pref-expandable .cal-pill { margin-left: -4px; }
    .cal-pill { opacity: 0; transform: scale(0.85); transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
    .cal-pref-expandable.expanded .cal-pill { opacity: 1; transform: scale(1); }
    .cal-pref-expandable.expanded .cal-pill:nth-child(1) { transition-delay: 0.1s; }
    .cal-pref-expandable.expanded .cal-pill:nth-child(2) { transition-delay: 0.2s; }
    .cal-pref-expandable.expanded .cal-pill:nth-child(3) { transition-delay: 0.3s; }
    .cal-pref-expandable.expanded .cal-pill:nth-child(4) { transition-delay: 0.4s; }
    .cal-pref-expandable.expanded .cal-pill:nth-child(5) { transition-delay: 0.5s; }
    .cal-pill { display: inline-flex; align-items: center; padding: 1px 8px; font-size: 12px; font-weight: 450; color: #1B1715; background: #F5F3F0; border-radius: 6px; white-space: nowrap; }
    .cal-pill-logo { gap: 5px; }
    .cal-pill-img { width: 14px; height: 14px; max-width: 14px; max-height: 14px; border-radius: 3px; object-fit: contain; flex-shrink: 0; }
    .cal-pref-check { flex-shrink: 0; opacity: 0; transform: scale(0); }
    .cal-pref-card.checked .cal-pref-check { opacity: 1; transform: scale(1); animation: calCheckPop 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
    @keyframes calCheckPop {
      0% { opacity: 0; transform: scale(0) rotate(-10deg); }
      50% { opacity: 1; transform: scale(1.25) rotate(4deg); }
      100% { opacity: 1; transform: scale(1) rotate(0deg); }
    }
    .cal-pref-check path {
      stroke-dasharray: 20;
      stroke-dashoffset: 20;
    }
    .cal-pref-card.checked .cal-pref-check path {
      animation: calCheckDraw 0.35s ease 0.15s forwards;
    }
    @keyframes calCheckDraw {
      to { stroke-dashoffset: 0; }
    }

    /* Phase 2: Rating */
    .cal-phase-rate {
      display: flex; flex-direction: column;
      background: #fff; border-radius: 12px;
      border: 0.69px solid rgba(27,23,21,0.1);
      box-shadow: 0 8px 40px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.03);
      overflow: hidden;
      position: relative;
      transition: opacity 0.4s ease;
    }
    .cal-rate-header {
      position: relative;
      z-index: 10;
      padding: 0;
      border: none;
      background: transparent;
      display: flex;
      justify-content: center;
      margin: 10px 20px 8px 20px;
    }
    .cal-rate-count { display: none; }
    .cal-rate-body { position: relative; }
    .cal-candidate {
      position: absolute; top: 0; left: 0; right: 0;
      padding: 20px;
      opacity: 0; transform: translateX(60px);
      transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1);
      pointer-events: none;
    }
    .cal-candidate.active {
      position: relative; opacity: 1; transform: translateX(0); pointer-events: auto;
    }
    .cal-candidate.exit {
      opacity: 0; transform: translateX(-60px);
    }
    .cal-candidate .app-candidate-header { margin-bottom: 14px !important; }
    .cal-fit-title { font-size: 15px; font-weight: 500; margin-bottom: 8px; }
    .cal-fit-signals { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
    .cal-fit-signal { display: inline-flex; align-items: center; gap: 5px; flex: 1; min-width: 0; }
    .cal-fit-signal svg { width: 12px; height: 12px; flex-shrink: 0; color: rgba(27,23,21,0.3); opacity: 0; transform: scale(0.5); transition: opacity 0.4s ease, transform 0.4s ease; }
    .cal-fit-signal.visible svg { opacity: 1; transform: scale(1); }
    .cal-fit-signal .app-shimmer { margin-bottom: 0; height: 10px; border-radius: 4px; flex: 1; }
    .cal-fit-signal.full { flex-basis: 100%; }

    /* Score buttons island */
    .cal-score-btns {
      display: flex;
      background: #fff;
      border-radius: 10px;
      border: 1px solid rgba(27,23,21,0.1);
      box-shadow: 0 4px 20px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.04);
      padding: 2px;
      overflow: hidden;
    }
    .cal-score-btns {
      width: 100%;
    }
    .cal-score-btn {
      flex: 1; height: 24px;
      display: flex; align-items: center; justify-content: center;
      font-size: 11.5px; font-weight: 600; color: rgba(27,23,21,0.35);
      background: transparent;
      border: none;
      border-radius: 6px;
      position: relative;
      transition: background 0.2s ease, color 0.2s ease;
    }
    .cal-score-btn:last-child {
      border-right: none;
    }
    .cal-score-btn::after {
      content: '';
      position: absolute;
      bottom: 0; left: 20%; right: 20%;
      height: 2px;
      border-radius: 1px;
      background: transparent;
      transform: scaleX(0);
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease;
    }
    .cal-score-btn {
      pointer-events: auto;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .cal-score-btn:hover {
      background: rgba(27,23,21,0.06);
      color: rgba(27,23,21,0.6);
    }
    .cal-score-btn:nth-child(-n+3):hover {
      background: rgba(239,68,68,0.08);
      color: #DC2626;
    }
    .cal-score-btn:nth-child(n+4):nth-child(-n+6):hover {
      background: rgba(245,158,11,0.08);
      color: #B45309;
    }
    .cal-score-btn:nth-child(n+7):hover {
      background: rgba(34,197,94,0.08);
      color: #16A34A;
    }
    .cal-score-btn.pressing {
      background: rgba(27,23,21,0.06);
    }
    .cal-score-btn.selected.low {
      background: rgba(239,68,68,0.14); color: #DC2626;
    }
    .cal-score-btn.selected.low::after {
      background: #DC2626; transform: scaleX(1);
    }
    .cal-score-btn.selected.mid {
      background: rgba(245,158,11,0.14); color: #B45309;
    }
    .cal-score-btn.selected.mid::after {
      background: #B45309; transform: scaleX(1);
    }
    .cal-score-btn.selected.high {
      background: rgba(34,197,94,0.14); color: #16A34A;
    }
    .cal-score-btn.selected.high::after {
      background: #16A34A; transform: scaleX(1);
    }
    @keyframes btnFlash {
      0% { opacity: 1; }
      50% { opacity: 0.3; }
      100% { opacity: 0; }
    }
    .cal-score-btn.flash::before {
      content: '';
      position: absolute;
      inset: 0;
      background: #fff;
      animation: btnFlash 0.3s ease-out forwards;
      pointer-events: none;
    }

    /* Phase 3: Complete overlay */
    .cal-complete-overlay {
      position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10;
      background: #fff;
      -webkit-backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(10px);
      display: flex; align-items: flex-start; justify-content: center;
      border-radius: 12px; opacity: 0; pointer-events: none;
      transition: opacity 0.4s ease;
      padding-top: 35%;
    }
    .cal-complete-overlay.show { opacity: 1; pointer-events: auto; }
    .cal-complete-overlay.exit {
      opacity: 0;
    }
    .cal-complete-inner { text-align: center; }
    .cal-complete-check {
      width: 32px; height: 32px; margin: 0 auto 10px;
    }
    .cal-complete-check svg { width: 100%; height: 100%; }
    .cal-complete-overlay.show .cal-complete-check {
      animation: calCheckPop 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
    }
    .cal-complete-check path {
      stroke-dasharray: 20;
      stroke-dashoffset: 20;
    }
    .cal-complete-overlay.show .cal-complete-check path {
      animation: calCheckDraw 0.35s ease 0.35s forwards;
    }
    .cal-complete-title { font-size: 15px; font-weight: 450; color: #1B1715; }

    @media (max-width: 1099.98px) {
      #cal-embed .app-candidate-location,
      #sourcing-embed .app-candidate-location {
        display: none;
      }
      .cal-phase-prefs {
        gap: 6.5px;
      }
      .cal-pref-card {
        padding: 5px 14px;
      }
      .cal-pref-icon svg {
        width: 14px;
        height: 14px;
      }
      .cal-pref-title {
        font-size: 11.5px;
      }
      .cal-pref-expandable .cal-pill {
        display: none;
      }
      .cal-pref-card[data-cal-idx="5"] {
        display: none;
      }
      .cal-complete-overlay {
        padding-top: 30%;
      }
      .cal-complete-title {
        font-size: 14px;
      }
      .cal-complete-check {
        width: 28px;
        height: 28px;
      }
      .cal-rate-header {
        margin-bottom: 14px;
      }
      .cal-phase-rate {
        width: 440px;
        transform-origin: top left;
        position: relative;
        overflow: hidden;
      }
      .cal-candidate .app-candidate-avatar {
        width: 58px;
        height: 58px;
      }
      .cal-candidate .app-candidate-name {
        font-size: 22px;
      }
      .cal-candidate .app-candidate-title {
        font-size: 17px;
      }
      .cal-candidate .app-candidate-name-row {
        padding-bottom: 5px !important;
      }
      .cal-candidate .app-candidate-header {
        gap: 14px;
      }
      .cal-fit-title {
        font-size: 16px;
      }
      .cal-fit-signal svg {
        width: 14px;
        height: 14px;
      }
      .cal-fit-signal .app-shimmer {
        height: 12px;
      }
      .cal-candidate .app-section-title {
        font-size: 16px;
      }
      .cal-candidate .app-exp-logo {
        width: 44px;
        height: 44px;
      }
      .cal-candidate .app-exp-role {
        font-size: 16px;
      }
      .cal-candidate .app-exp-dates {
        font-size: 14.5px;
      }
      .cal-candidate .app-exp-info .app-shimmer {
        height: 9px;
      }
      .cal-rate-body {
        min-height: 320px;
      }
      .cal-candidate {
        padding-top: 8px;
      }
      .cal-phase-rate .cal-score-btn {
        height: 28px;
        font-size: 12px;
      }
      .cal-fit-signals {
        flex-wrap: nowrap;
        overflow: hidden;
      }
      .cal-fit-signal.full {
        flex-basis: auto;
      }
      .feature-sections {
        width: calc(100% - 24px);
        padding: 20px 0 80px;
        gap: 80px;
      }
      .feature-row.has-bg {
        padding: 48px 24px !important;
        border-radius: 5px;
      }
      .feature-row.has-frame {
        padding: 0 24px;
      }
      .feature-row,
      .feature-row.reversed {
        flex-direction: column;
        gap: 32px;
      }
      .feature-text {
        text-align: left;
        align-items: flex-start;
      }
      .feature-text .feature-btn {
        display: none;
      }
      .feature-title {
        font-size: 26px;
      }
      .feature-body {
        font-size: 14px;
        max-width: 100%;
      }
      .feature-painting {
        width: 100%;
      }
    }

    /* ── MINI SHELL (sourcing feature) ── */
    .mini-drawer .app-drawer-header {
      display: none;
    }
    .mini-action-island {
      position: relative;
      z-index: 10;
      display: flex;
      justify-content: flex-start;
      margin: 10px 20px 8px 20px;
    }
    .mini-island-btns {
      display: flex;
      background: #fff;
      border-radius: 10px;
      border: 1px solid rgba(27,23,21,0.1);
      box-shadow: 0 4px 20px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.04);
      padding: 2px;
      overflow: hidden;
    }
    .mini-island-btn {
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 0 30px;
      font-size: 14px;
      font-weight: 500;
      color: #1B1715;
      background: transparent;
      border: none !important;
      border-radius: 6px;
      white-space: nowrap;
      pointer-events: auto;
      cursor: pointer;
      transition: background 0.15s ease;
    }
    .mini-island-btn svg {
      width: 12px;
      height: 12px;
    }
    .mini-island-btn:hover {
      background: rgba(27,23,21,0.06);
    }
    .mini-island-btn:active {
      background: rgba(27,23,21,0.10);
      transform: scale(0.95);
    }
    .mini-island-btn.pressing {
      background: rgba(27,23,21,0.06);
    }
    .mini-island-shortlist.pressing,
    .mini-island-shortlist.pressed {
      background: rgba(34,197,94,0.14);
      color: #16A34A;
    }
    .mini-island-reject.pressing,
    .mini-island-reject.pressed {
      background: rgba(239,68,68,0.14);
      color: #DC2626;
    }
    .mini-shell {
      width: 1000px;
      height: 625px;
      overflow: visible;
      font-size: 13px;
      transform-origin: top left;
    }
    .mini-drawer {
      width: 100% !important;
      height: 100% !important;
      max-height: 100% !important;
      border-radius: 10px !important;
    }
    .mini-drawer .app-drawer-left {
      width: 30%;
    }
    .mini-drawer .app-drawer-right {
      width: 63%;
    }
    .mini-drawer .app-candidate-links .app-link-btn:last-child {
      display: none;
    }
    .mini-drawer .app-summary-lines {
      display: none;
    }
    .mini-drawer .app-candidate-header {
      margin-bottom: 14px;
    }
    .mini-drawer .app-scorecard-item .app-shimmer {
      display: block;
    }
    .mini-drawer .app-exp-info .app-shimmer {
      width: 100% !important;
    }
    .mini-drawer .app-exp-info .app-shimmer + .app-shimmer {
      width: 85% !important;
    }
    .mini-drawer .app-exp-grouped-role {
      padding-left: 0;
    }
    .mini-drawer .app-exp-grouped-role .exp-dot,
    .mini-drawer .app-exp-grouped-role .exp-line {
      display: none;
    }
    .mini-nav-count {
      font-weight: 450;
      color: rgba(27,23,21,0.5);
      white-space: nowrap;
    }
    .mini-profile {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      opacity: 0;
      transform: translateX(100%);
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
      pointer-events: none;
    }
    .mini-profile.active {
      position: relative;
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
    }
    .mini-profile.slide-out-left {
      position: absolute;
      opacity: 0;
      transform: translateX(-100%);
    }
    /* Shortlist toast (legacy, kept for reference) */
    .mini-shortlist-toast { display: none; }

    /* Meets hiring bar toast */
    .mini-hiring-bar-toast {
      position: absolute;
      top: 16px; left: 16px;
      width: auto;
      z-index: 9;
      opacity: 0;
      transform: translateY(-12px) scale(0.96);
      pointer-events: none;
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
    }
    .mini-hiring-bar-toast.show {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    .mini-hiring-bar-toast.fade-out {
      opacity: 0;
      transform: translateY(-8px) scale(0.97);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    }
    .mini-drawer:has(.mini-hiring-bar-toast.show) .app-drawer-body-wrapper {
      filter: blur(3px);
      opacity: 0.4;
    }
    .mini-hiring-bar-toast-card {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 18px 23px;
      background: #fff;
      border: 0.69px solid rgba(27,23,21,0.15);
      border-radius: 16px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
    }
    .mini-hiring-bar-toast-check {
      width: 25px;
      height: 25px;
      flex-shrink: 0;
    }
    .mini-hiring-bar-toast-check svg {
      width: 25px;
      height: 25px;
    }
    .mini-hiring-bar-toast.show .mini-hiring-bar-toast-check {
      animation: checkPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
    }
    .mini-hiring-bar-toast-text {
      font-size: 17px;
      font-weight: 450;
      color: #1B1715;
    }

    /* Legacy shortlist toast card (hidden) */
    .mini-shortlist-toast-card {
      display: none;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 18px 23px;
      background: #fff;
      border: 0.69px solid rgba(27,23,21,0.15);
      border-radius: 16px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
    }
    .mini-shortlist-toast-check {
      width: 25px;
      height: 25px;
      flex-shrink: 0;
    }
    .mini-shortlist-toast-check svg {
      width: 25px;
      height: 25px;
    }
    .mini-shortlist-toast.show .mini-shortlist-toast-check {
      animation: checkPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
    }
    .mini-shortlist-toast-text {
      font-size: 17px;
      font-weight: 450;
      color: #1B1715;
    }

    .mini-reject-modal {
      position: absolute;
      top: 56px; left: 16px;
      width: 414px;
      z-index: 9;
      opacity: 0;
      transform: translateY(-12px) scale(0.96);
      pointer-events: none;
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
    }
    .mini-reject-modal.show {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    .mini-drawer .app-drawer-header,
    .mini-drawer .app-drawer-body-wrapper,
    .mini-action-island {
      transition: filter 0.4s ease, opacity 0.4s ease;
    }
    .mini-drawer:has(.mini-reject-modal.show) .app-drawer-header,
    .mini-drawer:has(.mini-reject-modal.show) .app-drawer-body-wrapper {
      filter: blur(3px);
      opacity: 0.4;
    }
    .mini-drawer:has(.mini-shortlist-toast.show) .mini-action-island,
    .mini-drawer:has(.mini-reject-modal.show) .mini-action-island {
      opacity: 0.4;
      pointer-events: none;
    }
    .mini-reject-modal.slide-out {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    .mini-reject-modal.slide-out.fade-bg {
      opacity: 0;
      transform: translateY(-8px) scale(0.97);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    }
    .mini-reject-modal-card {
      display: flex;
      flex-direction: column;
      position: relative;
      width: 100%;
      padding: 18px 23px;
      background: #fff;
      border: 0.69px solid rgba(27,23,21,0.15);
      border-radius: 16px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
      opacity: 1;
      transform: none;
      transition: none;
    }
    .mini-reject-modal.show .mini-reject-modal-card {
      opacity: 1;
      transform: none;
    }
    .mini-reject-modal.slide-out .mini-reject-modal-card {
      opacity: 1;
      transform: none;
    }
    .mini-reject-modal-header {
      display: flex;
      align-items: center;
      gap: 12px;
      white-space: nowrap;
      justify-content: flex-start;
    }
    .mini-reject-modal-check {
      width: 25px;
      height: 25px;
      flex-shrink: 0;
    }
    .mini-reject-modal-check svg {
      width: 25px;
      height: 25px;
    }
    .mini-reject-modal.show .mini-reject-modal-check {
      animation: checkPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
    }
    .mini-reject-modal-text {
      font-size: 17px;
      font-weight: 450;
      color: #1B1715;
    }
    .mini-reject-modal-subtext {
      font-size: 16px;
      font-weight: 400;
      color: rgba(27,23,21,0.45);
      margin-top: 4px;
    }
    .mini-reject-modal-subtext:empty { display: none; }
    .mini-reject-feedback-area {
      width: 100%;
      margin-top: 12px;
      position: relative;
      min-height: 20px;
    }
    .mini-reject-feedback-body {
      font-size: 16px;
      line-height: 1.5;
      color: #1B1715;
      font-weight: 400;
    }
    .mini-reject-feedback-body .word {
      display: inline;
      opacity: 0;
      filter: blur(4px);
      transition: opacity 0.18s ease, filter 0.18s ease;
    }
    .mini-reject-feedback-body .word.show {
      opacity: 1;
      filter: blur(0);
    }
    .mini-reject-feedback-body.sent-blur {
      filter: blur(3px);
      opacity: 0.3;
      transition: filter 0.4s ease, opacity 0.4s ease;
    }
    .mini-reject-sent {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 9px;
      opacity: 0;
      transition: opacity 0.3s ease;
      font-size: 16px;
      font-weight: 450;
      color: #991B1B;
    }
    .mini-reject-sent.visible {
      opacity: 1;
    }
    .mini-reject-sent svg {
      width: 20px;
      height: 20px;
    }
    .mini-reject-sent.fade-out {
      opacity: 0;
    }
    .mini-reject-learning {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      opacity: 0;
      transition: opacity 0.35s ease;
      font-size: 14px;
      font-weight: 450;
      color: rgb(180,120,70);
    }
    .mini-reject-learning.visible {
      opacity: 1;
    }
    .mini-reject-learning svg {
      width: 16px;
      height: 16px;
      color: rgb(180,120,70);
      animation: sparkleSpin 3s ease-in-out infinite;
    }
    @keyframes sparkleSpin {
      0% { transform: rotate(0deg); }
      10% { transform: rotate(90deg); }
      25% { transform: rotate(90deg); }
      35% { transform: rotate(180deg); }
      50% { transform: rotate(180deg); }
      60% { transform: rotate(270deg); }
      75% { transform: rotate(270deg); }
      85% { transform: rotate(360deg); }
      100% { transform: rotate(360deg); }
    }
    .mini-reject-learning.visible span {
      background: linear-gradient(90deg, rgba(180,120,70,0.6) 0%, rgba(180,120,70,0.6) 40%, rgba(180,120,70,0.2) 50%, rgba(180,120,70,0.6) 60%, rgba(180,120,70,0.6) 100%);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: textShimmer 2.5s ease-in-out infinite;
    }
    @keyframes textShimmer {
      0% { background-position: 100% 0; }
      100% { background-position: -100% 0; }
    }

    /* ── OUTREACH EMBED ── */
    .outreach-shell {
      width: 460px;
      transform-origin: top left;
    }
    #outreach-embed {
      top: 0; bottom: 0; height: auto;
      display: flex; align-items: center; justify-content: center;
    }
    .otl-stage {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      position: relative;
    }
    @media (max-width: 1099.98px) {
      .otl-stage {
        min-height: 260px;
      }
    }
    .otl-card {
      width: 100%;
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 8px 40px rgba(0,0,0,0.10), 0 1.5px 6px rgba(0,0,0,0.04);
      padding: 20px 24px;
      opacity: 0;
      transform: translateY(30px) scale(0.97);
      transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .otl-card.show {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    .otl-card.slide-out {
      opacity: 0;
      transform: translateY(-40px) scale(0.96);
      transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .otl-card-header {
      display: flex; align-items: center; gap: 12px;
    }
    .otl-card-icon { width: 22px; height: 22px; flex-shrink: 0; }
    .otl-card-icon svg { width: 22px; height: 22px; }
    .otl-card-title { font-size: 16px; font-weight: 450; color: #1B1715; }
    .otl-card-step { margin-left: auto; font-size: 13px; font-weight: 400; color: rgba(27,23,21,0.4); flex-shrink: 0; }
    .otl-card-expand {
      margin-top: 0;
      width: 100%;
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .otl-card-expand.visible {
      margin-top: 16px;
    }
    .otl-card-expand-inner { position: relative; }
    .otl-card-body {
      font-size: 14.5px;
      line-height: 1.6;
      color: #1B1715;
      font-weight: 400;
    }
    .otl-card-body .word {
      display: inline; opacity: 0; filter: blur(4px);
      transition: opacity 0.18s ease, filter 0.18s ease;
    }
    .otl-card-body .word.show { opacity: 1; filter: blur(0); }
    .otl-card-body .highlight { background: rgba(245,158,11,0.12); border-radius: 3px; padding: 0 2px; }
    .otl-card-body .highlight-blue { background: rgba(59,130,246,0.10); border-radius: 3px; padding: 0 2px; }
    .otl-card-body .otl-bullet { display: block; padding-left: 16px; position: relative; margin-top: 4px; opacity: 0; transition: opacity 0.15s ease; }
    .otl-card-body .otl-bullet.visible { opacity: 1; }
    .otl-card-body .otl-bullet::before { content: ''; position: absolute; left: 4px; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: rgba(27,23,21,0.3); }
    .otl-card-body.sent-blur { filter: blur(3px); opacity: 0.3; transition: filter 0.4s ease, opacity 0.4s ease; }
    .otl-card-sent {
      position: absolute; top: 0; left: 0; right: 0; bottom: 0;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      opacity: 0; transform: scale(0.9);
      transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
    }
    .otl-card-sent.visible { opacity: 1; transform: scale(1); }
    .otl-card-sent svg { width: 20px; height: 20px; }
    .otl-card-sent span { font-size: 14px; font-weight: 450; color: #16a34a; }
    /* Transition pill between emails */
    .otl-mid-pill {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%) translateY(12px) scale(0.9);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 22px;
      background: #fff;
      border: 0.69px solid rgba(27,23,21,0.10);
      border-radius: 24px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
      font-size: 15px;
      font-weight: 450;
      color: rgba(27,23,21,0.6);
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
      transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.4s;
      white-space: nowrap;
    }
    .otl-mid-pill.show {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translate(-50%, -50%) translateY(0) scale(1);
      transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
    }
    .otl-mid-pill.show span {
      background: linear-gradient(90deg, rgba(180,120,70,0.6) 0%, rgba(180,120,70,0.6) 40%, rgba(180,120,70,0.2) 50%, rgba(180,120,70,0.6) 60%, rgba(180,120,70,0.6) 100%);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: textShimmer 2.5s ease-in-out infinite;
    }
    .otl-mid-pill.show span svg {
      -webkit-text-fill-color: initial;
    }
    .otl-mid-pill.show .otl-pill-sparkle {
      background: linear-gradient(90deg, rgba(180,120,70,0.45) 0%, rgba(180,120,70,0.45) 40%, rgba(180,120,70,0.12) 50%, rgba(180,120,70,0.45) 60%, rgba(180,120,70,0.45) 100%);
      background-size: 200% 100%;
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.2633 2.13337L9.97925 0.806375C9.74925 -0.268625 8.21525 -0.268625 7.98625 0.805375L7.70225 2.13238C7.10525 4.92438 4.92425 7.10437 2.13325 7.70137L0.80625 7.98537C-0.26875 8.21537 -0.26875 9.74838 0.80625 9.97838L2.13325 10.2624C4.92525 10.8594 7.10525 13.0404 7.70225 15.8314L7.98625 17.1594C8.21625 18.2344 9.74925 18.2344 9.97925 17.1594L10.2633 15.8324C10.8603 13.0404 13.0413 10.8604 15.8323 10.2634L17.1593 9.97937C18.2343 9.74937 18.2343 8.21637 17.1593 7.98637L15.8323 7.70237C13.0403 7.10537 10.8603 4.92437 10.2633 2.13337Z'/%3E%3C/svg%3E");
      mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.2633 2.13337L9.97925 0.806375C9.74925 -0.268625 8.21525 -0.268625 7.98625 0.805375L7.70225 2.13238C7.10525 4.92438 4.92425 7.10437 2.13325 7.70137L0.80625 7.98537C-0.26875 8.21537 -0.26875 9.74838 0.80625 9.97838L2.13325 10.2624C4.92525 10.8594 7.10525 13.0404 7.70225 15.8314L7.98625 17.1594C8.21625 18.2344 9.74925 18.2344 9.97925 17.1594L10.2633 15.8324C10.8603 13.0404 13.0413 10.8604 15.8323 10.2634L17.1593 9.97937C18.2343 9.74937 18.2343 8.21637 17.1593 7.98637L15.8323 7.70237C13.0403 7.10537 10.8603 4.92437 10.2633 2.13337Z'/%3E%3C/svg%3E");
      -webkit-mask-size: contain;
      mask-size: contain;
      animation: textShimmer 2.5s ease-in-out infinite, sparkleSpin 3s ease-in-out infinite;
    }
    .otl-mid-pill.fade-out {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translate(-50%, -50%) translateY(-10px) scale(0.95);
      transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
    }
    .otl-reply-pill {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%) translateY(12px) scale(0.9) !important;
      color: #1B1715; font-weight: 450;
    }
    .otl-reply-pill.show {
      transform: translate(-50%, -50%) translateY(0) scale(1) !important;
    }
    .otl-reply-pill.show span {
      background: none !important;
      -webkit-background-clip: unset !important;
      background-clip: unset !important;
      -webkit-text-fill-color: #1B1715 !important;
      animation: none !important;
    }
    .otl-reply-pill.fade-out {
      transform: translate(-50%, -50%) translateY(-10px) scale(0.95) !important;
    }
    .otl-reply-check {
      width: 20px; height: 20px; flex-shrink: 0;
    }
    .otl-reply-check path {
      stroke-dasharray: 20;
      stroke-dashoffset: 20;
    }
    .otl-reply-pill.show .otl-reply-check path {
      animation: calCheckDraw 0.35s ease 0.2s forwards;
    }
    .otl-pill-sparkle {
      width: 13px; height: 13px; color: rgba(180,120,70,0.5);
      animation: sparkleSpin 3s ease-in-out infinite;
    }
    .otl-pill-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
    .otl-pill-dot.replied { background: #3B82F6; }

    /* ── MEETINGS EMBED ── */
    .meetings-shell {
      width: 460px;
      transform-origin: top left;
    }
    #meetings-embed {
      top: 0; bottom: 0; height: auto;
      display: flex; align-items: center; justify-content: center;
    }
    .mtg-stage {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      position: relative;
    }
    @media (max-width: 1099.98px) {
      .mtg-stage { min-height: 260px; }
    }
    .mtg-card {
      width: 100%;
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 8px 40px rgba(0,0,0,0.10), 0 1.5px 6px rgba(0,0,0,0.04);
      padding: 20px 24px;
      opacity: 0;
      transform: translateY(60px);
      transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .mtg-card.show {
      opacity: 1;
      transform: translateY(0);
    }
    .mtg-card.slide-out {
      opacity: 0;
      transform: translateY(-40px) scale(0.96);
      transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .mtg-card-header {
      display: flex; align-items: center; gap: 12px; width: 100%;
    }
    .mtg-card-icon { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; }
    .mtg-card-icon img { width: 22px; height: 22px; display: block; }
    .mtg-card-title { font-size: 16px; font-weight: 450; color: #1B1715; display: flex; align-items: center; gap: 6px; flex: 1; }
    .mtg-card-via { margin-left: auto; display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
    .mtg-via { font-size: 13px; font-weight: 400; color: rgba(27,23,21,0.4); line-height: 1; }
    .mtg-card-via svg { width: 15px; height: 15px; flex-shrink: 0; }
    .mtg-card-expand {
      margin-top: 0;
      width: 100%;
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .mtg-card-expand.visible {
      margin-top: 16px;
    }
    .mtg-card-expand-inner { position: relative; }
    .mtg-card-body {
      font-size: 14.5px;
      line-height: 1.6;
      color: #1B1715;
      font-weight: 400;
    }
    .mtg-card-body .word {
      display: inline; opacity: 0; filter: blur(4px);
      transition: opacity 0.18s ease, filter 0.18s ease;
    }
    .mtg-card-body .word.show { opacity: 1; filter: blur(0); }
    .mtg-card-body.sent-blur { filter: blur(3px); opacity: 0.3; transition: filter 0.4s ease, opacity 0.4s ease; }
    .mtg-card-sent {
      position: absolute; top: 0; left: 0; right: 0; bottom: 0;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      opacity: 0; transform: scale(0.9);
      transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
    }
    .mtg-card-sent.visible { opacity: 1; transform: scale(1); }
    .mtg-card-sent svg { width: 20px; height: 20px; }
    .mtg-card-sent span { font-size: 14px; font-weight: 450; color: #16a34a; }
    .mtg-candidate,
    .mtg-actions {
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .mtg-card.show .mtg-candidate {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.1s;
    }
    .mtg-card.show .mtg-actions {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.2s;
    }
    .mtg-candidate {
      display: flex;
      gap: 16px;
      margin-bottom: 16px;
    }
    .mtg-candidate-avatar {
      width: 56px; height: 56px;
      border-radius: 12px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .mtg-candidate-avatar img {
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .mtg-candidate-info {
      flex: 1; min-width: 0;
      display: flex; flex-direction: column; justify-content: center; gap: 2px;
    }
    .mtg-candidate-name {
      font-size: 17px; font-weight: 500; color: #1B1715;
    }
    .mtg-candidate-role {
      font-size: 14px; color: rgba(27,23,21,0.7); margin-top: 0px;
    }
    .mtg-candidate-interested {
      font-size: 13px; color: rgba(27,23,21,0.5); margin-top: 3px;
    }
    .mtg-role-underline {
      text-decoration: underline;
      text-decoration-style: dotted;
      text-underline-offset: 2px;
      color: rgba(27,23,21,0.5);
    }
    .mtg-actions {
      display: flex; gap: 8px;
    }
    .mtg-btn {
      flex: 1; padding: 5px 0; border-radius: 8px;
      font-size: 13.5px; font-weight: 450;
      display: flex; align-items: center; justify-content: center; gap: 6px;
      background: transparent; color: #1B1715;
      cursor: default;
      transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    }
    .mtg-btn svg { flex-shrink: 0; }
    .mtg-btn {
      pointer-events: auto;
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    }
    .mtg-btn-primary {
      border: 1px solid rgba(34,197,94,0.5);
    }
    .mtg-btn-primary:hover {
      background: rgba(34,197,94,0.08);
      border-color: rgba(34,197,94,0.7);
    }
    .mtg-btn-primary.pressing {
      background: rgba(34,197,94,0.08);
      border-color: rgba(34,197,94,0.7);
      transform: scale(0.97);
    }
    .mtg-btn-primary.pressed {
      background: rgba(34,197,94,0.15);
      border-color: #22C55E;
      transform: scale(1);
    }
    .mtg-btn-secondary {
      border: 1px solid rgba(239,68,68,0.5);
    }
    .mtg-btn-secondary:hover {
      background: rgba(239,68,68,0.08);
      border-color: rgba(239,68,68,0.7);
    }
    .mtg-reply-pill {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%) translateY(12px) scale(0.9);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 22px;
      background: #fff;
      border: 0.69px solid rgba(27,23,21,0.10);
      border-radius: 24px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
      font-size: 15px;
      font-weight: 450;
      color: #1B1715;
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
      transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.4s;
      white-space: nowrap;
    }
    .mtg-reply-pill.show {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translate(-50%, -50%) translateY(0) scale(1);
      transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
    }
    .mtg-reply-pill.show span {
      background: none;
      -webkit-text-fill-color: #1B1715;
    }
    .mtg-reply-pill.fade-out {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translate(-50%, -50%) translateY(-10px) scale(0.95);
      transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
    }
    .mtg-reply-check {
      width: 20px; height: 20px; flex-shrink: 0;
    }
    .mtg-reply-check path {
      stroke-dasharray: 20;
      stroke-dashoffset: 20;
    }
    .mtg-reply-pill.show .mtg-reply-check path {
      animation: calCheckDraw 0.35s ease 0.2s forwards;
    }

    /* TIMELINE SECTION */
    .timeline-section {
      width: 100%;
      max-width: 975px;
      margin: 0 auto;
      padding: 100px 0 60px;
      opacity: 0;
      transform: translateY(30px);
    }
    .timeline-section.visible {
      animation: slideUp 0.7s ease forwards;
    }
    .timeline-label {
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #C4956A;
      margin-bottom: 14px;
    }
    .timeline-header {
      font-family: 'Inter', sans-serif;
      font-size: 36px;
      font-weight: 500;
      letter-spacing: -0.01em;
      line-height: 1.2;
      color: var(--text);
      margin-bottom: 60px;
    }
    .timeline-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      position: relative;
    }
    .timeline-grid::before {
      content: '';
      position: absolute;
      top: 20px;
      left: 0;
      right: 0;
      height: 1px;
      background: rgba(27, 23, 21, 0.1);
    }
    .timeline-step {
      padding: 0 32px;
      position: relative;
    }
    .timeline-step:first-child {
      padding-left: 0;
    }
    .timeline-step:last-child {
      padding-right: 0;
    }
    .timeline-step-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      padding: 0 16px;
      border: 1.5px solid #C4956A;
      border-radius: 8px;
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0;
      color: #C4956A;
      background: var(--bg);
      position: relative;
      z-index: 1;
      margin-bottom: 28px;
    }
    .timeline-step-title {
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--text);
      margin-bottom: 14px;
    }
    .timeline-step-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .timeline-step-list li {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.5;
      color: #666;
    }
    .timeline-step-list li::before {
      content: '';
      flex-shrink: 0;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #C4956A;
      margin-top: 6px;
    }
    @media (max-width: 768px) {
      .timeline-section {
        width: calc(100% - 40px);
        padding: 60px 0 40px;
      }
      .timeline-header {
        font-size: 28px;
      }
      .timeline-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .timeline-grid::before {
        display: none;
      }
      .timeline-step {
        padding: 0;
      }
    }

    /* RLHF LEARNING ENGINE */
    .rlhf-term {
      position: relative;
      text-decoration: underline dotted rgba(27,23,21,0.35);
      text-underline-offset: 3px;
      cursor: help;
      transition: color 0.2s ease;
    }
    .rlhf-term:hover {
      color: #E07A5F;
    }
    .rlhf-info-icon {
      display: inline-block;
      vertical-align: -1.5px;
      margin-left: 2px;
      opacity: 0.4;
      transition: opacity 0.2s ease;
    }
    .rlhf-term:hover .rlhf-info-icon {
      opacity: 0.7;
    }
    .rlhf-tooltip {
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
      pointer-events: none;
      z-index: 10;
    }
    .rlhf-term:hover .rlhf-tooltip {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
      pointer-events: auto;
    }
    .rlhf-tooltip-content {
      display: block;
      background: #111;
      color: #fff;
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      font-weight: 400;
      line-height: 1.5;
      padding: 10px 14px;
      border-radius: 8px;
      max-width: 320px;
      width: max-content;
      box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    }
    .rlhf-tooltip-content::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: #111;
    }
    .rlhf-section {
      text-align: center;
      padding: 80px 24px;
    }
    .rlhf-section .feature-title {
      margin-bottom: 16px;
    }
    .rlhf-section .feature-body {
      max-width: 640px;
      margin: 0 auto 24px;
    }
    .rlhf-section .feature-btn {
      margin-bottom: 48px;
    }
    .rlhf-painting {
      background: rgba(219, 211, 200, 0.30);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 16px;
      padding: 32px 0;
    }
    .rlhf-tracks {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      gap: 4px;
      width: 100%;
    }
    .rlhf-track-mask {
      width: 100%;
      overflow: hidden;
      padding: 6px 0;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
    }
    .rlhf-track {
      display: flex;
      gap: 12px;
      width: max-content;
    }
    .rlhf-track-left {
      animation: rlhfScrollLeft 32s linear infinite;
    }
    .rlhf-track-right {
      animation: rlhfScrollRight 24s linear infinite;
    }
    @keyframes rlhfScrollLeft {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    @keyframes rlhfScrollRight {
      0%   { transform: translateX(-50%); }
      100% { transform: translateX(0); }
    }
    .rlhf-pill {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      font-weight: 450;
      color: rgba(27,23,21,0.6);
      background: #fff;
      border: 1px solid rgba(27,23,21,0.06);
      border-radius: 100px;
      padding: 8px 18px;
      white-space: nowrap;
      box-shadow: 0 1px 3px rgba(27,23,21,0.03);
    }
    .rlhf-track-right .rlhf-pill {
      opacity: 0.75;
    }
    @media (max-width: 768px) {
      .rlhf-pill {
        font-size: 11.5px;
        padding: 6px 14px;
      }
    }

    /* SECONDARY FEATURES GRID */
    .secondary-features {
      width: calc(100% - 100px);
      max-width: 975px;
      margin: 0 auto;
      padding: 80px 0 80px;
      text-align: center;
    }
    .secondary-features-header {
      font-family: 'Inter', sans-serif;
      font-size: 36px;
      font-weight: 500;
      letter-spacing: 0;
      line-height: 1.2;
      color: var(--text);
      margin-bottom: 12px;
    }
    .secondary-features-subtitle {
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.6;
      color: #555;
      margin-bottom: 56px;
    }
    [data-theme="dark"] .secondary-features-subtitle {
      color: #999;
    }
    .secondary-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      text-align: left;
    }
    .secondary-item {
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: rgba(219, 211, 200, 0.14);
      border-radius: 12px;
      padding: 20px;
      transition: background 0.35s ease;
    }
    .secondary-item:hover {
      background: rgba(219, 211, 200, 0.28);
    }
    [data-theme="dark"] .secondary-item {
      background: rgba(255, 255, 255, 0.05);
    }
    [data-theme="dark"] .secondary-item:hover {
      background: rgba(255, 255, 255, 0.08);
    }
    .secondary-item-header {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .secondary-item-icon {
      color: #A3906F;
      flex-shrink: 0;
    }
    [data-theme="dark"] .secondary-item-icon {
      color: #A3906F;
    }
    .secondary-item-title {
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--text);
    }
    .secondary-item-body {
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.5;
      color: #666;
    }
    [data-theme="dark"] .secondary-item-body {
      color: #888;
    }
    @media (max-width: 768px) {
      .secondary-features {
        width: calc(100% - 40px);
        padding: 50px 0 50px;
      }
      .secondary-features-header {
        font-size: 28px;
      }
      .secondary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      .secondary-item-visual {
        min-height: 60px;
      }
    }

    /* SECURITY SECTION */
    .security-section {
      width: calc(100% - 100px);
      max-width: 1300px;
      margin: 0 auto;
      padding: 80px 0 80px;
      text-align: center;
      opacity: 0;
      transform: translateY(30px);
    }
    .security-section.visible {
      animation: slideUp 0.7s ease forwards;
    }
    .security-label {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0;
      color: #999;
      margin-bottom: 12px;
    }
    .security-header {
      font-family: 'Inter', sans-serif;
      font-size: 36px;
      font-weight: 500;
      letter-spacing: 0;
      line-height: 1.2;
      color: var(--text);
      margin-bottom: 48px;
    }
    .security-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .security-grid {
      gap: 6px;
    }
    .security-card {
      background: rgba(219, 211, 200, 0.14);
      border-radius: 12px;
      padding: 14px;
      text-align: left;
      display: flex;
      flex-direction: column;
      gap: 10px;
      overflow: hidden;
    }
    .security-card-title {
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--text);
      padding: 0 4px;
    }
    .security-card-visual {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 232px;
      background: rgba(255, 255, 255, 0.75);
      border-radius: 8px;
      position: relative;
    }
    .security-soc2-wrap {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
    }
    .security-card:hover .security-soc2-wrap {
      transform: scale(1.06);
    }
    @keyframes soc2Spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .security-soc2-outer {
      position: absolute;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      border: 1px dashed rgba(27, 23, 21, 0.1);
      animation: soc2Spin 20s linear infinite;
      transition: border-color 0.4s ease, width 0.5s cubic-bezier(0.22,1,0.36,1), height 0.5s cubic-bezier(0.22,1,0.36,1);
    }
    .security-card:hover .security-soc2-outer {
      border-color: rgba(27, 23, 21, 0.2);
      width: 130px;
      height: 130px;
    }
    .security-soc2 {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 1px solid rgba(27, 23, 21, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Inter', sans-serif;
      font-size: 20px;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--text);
      transition: border-color 0.4s ease, box-shadow 0.5s ease;
    }
    .security-card:hover .security-soc2 {
      border-color: rgba(27, 23, 21, 0.2);
      box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    }
    .security-bank-circle {
      transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s ease, border-color 0.4s ease;
    }
    .security-card:hover .security-bank-circle {
      transform: scale(1.06);
      box-shadow: 0 6px 24px rgba(0,0,0,0.08);
      border-color: rgba(27, 23, 21, 0.2);
    }
    .security-bank-circle svg {
      transition: opacity 0.4s ease;
    }
    .security-card:hover .security-bank-circle svg {
      opacity: 0.85;
    }
    @keyframes bankShimmer {
      0% { background-position: -150% center; }
      100% { background-position: 250% center; }
    }
    .security-bank-circle::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
      background-size: 200% 100%;
      background-position: -150% center;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .security-card:hover .security-bank-circle::after {
      opacity: 1;
      animation: bankShimmer 1.2s ease-in-out;
    }
    .security-perm-menu {
      background: rgba(219, 211, 200, 0.14);
      border: 1px solid rgba(219, 211, 200, 0.3);
      border-radius: 10px;
      padding: 3px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
      min-width: 150px;
      position: relative;
    }
    .security-perm-slider {
      position: absolute;
      left: 3px;
      right: 3px;
      height: 0;
      background: rgba(219, 211, 200, 0.35);
      border-radius: 6px;
      transition: top 0.25s cubic-bezier(0.25, 1, 0.5, 1), height 0.2s ease;
      z-index: 0;
      pointer-events: none;
    }
    .security-perm-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px 9px;
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      font-weight: 450;
      color: #1B1715;
      cursor: pointer;
      border-radius: 6px;
      transition: background 0.12s;
      position: relative;
      z-index: 1;
    }
    .security-perm-option:hover {
      background: transparent;
    }
    .security-perm-option.selected {
      font-weight: 500;
    }
    .security-perm-check {
      width: 13px;
      height: 13px;
      stroke: #1B1715;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    @media (max-width: 768px) {
      .security-section {
        width: calc(100% - 40px);
        padding: 50px 0 50px;
      }
      .security-header {
        font-size: 28px;
      }
      .security-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .security-card-visual {
        min-height: 160px;
      }
      .security-card-visual svg,
      .security-soc2-wrap {
        transform: scale(0.8);
      }
      .security-bank-circle {
        transform: scale(1);
      }
      .security-bank-circle .security-chip-icon {
        transform: scale(1);
      }
      .security-card:hover .security-soc2-wrap {
        transform: scale(0.85);
      }
      .security-card:hover .security-bank-circle {
        transform: scale(1.06);
      }
      .security-perm-menu {
        transform: scale(0.85);
        transform-origin: center center;
      }
      .security-card {
        overflow: visible;
      }
    }

    /* FAQ SECTION */
    .faq-section {
      width: calc(100% - 100px);
      max-width: 1300px;
      margin: 0 auto;
      padding: 80px 0 80px;
      display: flex;
      gap: 80px;
      opacity: 0;
      transform: translateY(30px);
    }
    .faq-section.visible {
      animation: slideUp 0.7s ease forwards;
    }
    .faq-left {
      flex-shrink: 0;
      width: 280px;
      position: sticky;
      top: 120px;
      align-self: flex-start;
    }
    .faq-label {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 500;
      color: rgba(27,23,21,0.45);
      margin-bottom: 12px;
    }
    .faq-heading {
      font-family: 'Inter', sans-serif;
      font-size: 32px;
      font-weight: 500;
      color: #1B1715;
      line-height: 1.2;
      letter-spacing: -0.01em;
    }
    .faq-right {
      flex: 1;
    }
    .faq-item {
      border-bottom: 1px solid rgba(27,23,21,0.08);
    }
    .faq-question {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 0;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      font-weight: 500;
      color: #1B1715;
      letter-spacing: -0.01em;
      user-select: none;
      transition: color 0.2s ease;
    }
    .faq-question:hover {
      color: rgba(27,23,21,0.7);
    }
    .faq-icon {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
    }
    .faq-item.open .faq-icon {
      transform: rotate(45deg);
    }
    .faq-answer-wrap {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.4s cubic-bezier(0.22,1,0.36,1);
    }
    .faq-item.open .faq-answer-wrap {
      grid-template-rows: 1fr;
    }
    .faq-answer {
      overflow: hidden;
    }
    .faq-answer p {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 400;
      color: rgba(27,23,21,0.6);
      line-height: 1.6;
      letter-spacing: 0;
      padding-bottom: 20px;
    }
    @media (max-width: 768px) {
      .faq-section {
        width: calc(100% - 40px);
        flex-direction: column;
        gap: 32px;
        padding: 50px 0 50px;
      }
      .faq-left {
        width: 100%;
        position: static;
      }
      .faq-heading {
        font-size: 26px;
      }
    }

    /* INTEGRATIONS SECTION */
    .integrations-section {
      width: calc(100% - 100px);
      max-width: 1300px;
      margin: 0 auto;
      padding: 80px 0 60px;
      text-align: center;
      opacity: 0;
      transform: translateY(30px);
    }
    .integrations-section.visible {
      animation: slideUp 0.7s ease forwards;
    }
    .integrations-header {
      font-family: 'Inter', sans-serif;
      font-size: 36px;
      font-weight: 500;
      letter-spacing: 0;
      line-height: 1.2;
      color: var(--text);
      margin-bottom: 12px;
    }
    .integrations-subtitle {
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.6;
      color: #555;
      margin-bottom: 48px;
    }
    .integrations-grid-wrap {
      position: relative;
      margin-bottom: 36px;
    }
    .integrations-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 1px;
      background: rgba(27, 23, 21, 0.06);
      border: 1px solid rgba(27, 23, 21, 0.06);
      border-radius: 12px;
      overflow: hidden;
      position: relative;
    }
    .int-view-btn {
      height: 30px;
      padding: 0 12px;
      font-size: 12px;
    }
    .int-cell.showing-name img {
      filter: grayscale(100%) blur(4px) !important;
      opacity: 0.3 !important;
      transition: filter 0.3s ease, opacity 0.3s ease;
    }
    .int-cell-name {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      z-index: 2;
    }
    .int-cell-name.show {
      opacity: 1;
    }
    .int-cell-name span {
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.01em;
      color: rgba(27, 23, 21, 0.7);
      white-space: nowrap;
    }
    .int-cell:hover img {
      filter: grayscale(100%) blur(4px) !important;
      opacity: 0.3 !important;
    }
    .int-cell:hover .int-cell-hover-name {
      opacity: 1;
    }
    .int-cell-hover-name {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      z-index: 2;
    }
    .int-cell-hover-name span {
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.01em;
      color: rgba(27, 23, 21, 0.7);
      white-space: nowrap;
    }
    .int-badge {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      border: 1px solid rgba(27, 23, 21, 0.08);
      border-radius: 20px;
      padding: 6px 6px 6px 20px;
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0;
      color: var(--text);
      white-space: nowrap;
      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .int-cell {
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      aspect-ratio: 1;
      position: relative;
      overflow: hidden;
    }
    .int-cell img {
      width: 40px;
      height: 40px;
      object-fit: contain;
      opacity: 0.5;
      transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      filter: grayscale(100%);
    }
    .int-cell:hover img {
      opacity: 1;
      filter: grayscale(0%);
      transform: scale(1.08);
    }
    .int-cell.empty {
      background: var(--bg);
    }
    .int-cell.center-cell {
      background: rgba(219, 211, 200, 0.2);
    }
    .int-cell.center-cell .int-center-label {
      font-family: 'Inter', sans-serif;
      font-size: 22px;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--text);
      line-height: 1.2;
    }
    .int-cell.center-cell .int-center-sub {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 450;
      color: #888;
      margin-top: 2px;
    }
    .int-center-content {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    @media (max-width: 768px) {
      .integrations-section {
        width: calc(100% - 40px);
        padding: 40px 0 40px;
      }
      .integrations-grid {
        grid-template-columns: repeat(5, 1fr);
      }
      .integrations-header {
        font-size: 28px;
      }
      .integrations-section > .join-btn {
        display: inline-flex;
      }
    }

    /* INTEGRATIONS CONVEYOR */
    .int-conveyor-wrap {
      position: relative;
      padding: 83px 0;
      background: rgba(219, 211, 200, 0.14);
      border-radius: 16px;
      overflow: hidden;
    }
    .int-conveyor-track {
      display: flex;
      align-items: center;
      gap: 14px;
      width: max-content;
      transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
      height: 96px;
    }
    .int-tile {
      width: 64px;
      height: 64px;
      background: #fff;
      border: 1px solid rgba(27, 23, 21, 0.06);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: width 0.5s ease, height 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
    }
    .int-tile img {
      width: 32px;
      height: 32px;
      object-fit: contain;
      opacity: 0.4;
      filter: grayscale(100%);
      transition: opacity 0.5s ease, filter 0.5s ease, width 0.5s ease, height 0.5s ease;
    }
    @keyframes tileGlow {
      0% { box-shadow: 0 0 0 5px rgba(196, 149, 106, 0.18), 0 0 30px rgba(196, 149, 106, 0.16); }
      50% { box-shadow: 0 0 0 7px rgba(196, 149, 106, 0.3), 0 0 40px rgba(196, 149, 106, 0.25); }
      100% { box-shadow: 0 0 0 5px rgba(196, 149, 106, 0.18), 0 0 30px rgba(196, 149, 106, 0.16); }
    }
    .int-tile.active {
      width: 88px;
      height: 88px;
      border-color: rgba(196, 149, 106, 0.5);
      box-shadow: 0 0 0 5px rgba(196, 149, 106, 0.18), 0 0 30px rgba(196, 149, 106, 0.16);
      border-radius: 16px;
    }
    .int-tile.active.glow {
      animation: tileGlow 0.8s ease;
    }
    .int-tile.active img {
      width: 44px;
      height: 44px;
      opacity: 1;
      filter: grayscale(0%);
    }
    @media (max-width: 768px) {
      .int-tile {
        width: 64px;
        height: 64px;
        border-radius: 12px;
      }
      .int-tile img {
        width: 32px;
        height: 32px;
      }
      .int-tile.active {
        width: 84px;
        height: 84px;
      }
      .int-tile.active img {
        width: 42px;
        height: 42px;
      }
      .int-conveyor-track {
        gap: 12px;
        height: 92px;
      }
      .int-conveyor-wrap {
        padding: 66px 0;
      }
    }

    /* CTA SECTION */
    .cta-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 24px;
      padding: 80px 40px 80px;
      opacity: 0;
      transform: translateY(30px);
    }
    .cta-section.visible {
      animation: slideUp 0.7s ease forwards;
      position: relative;
      z-index: 10;
      background: var(--bg);
    }
    .cta-section .feature-btn {
      align-self: center;
    }
    .cta-subtitle {
      font-family: 'Inter', sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 15px;
      letter-spacing: 0;
      line-height: 1.6;
      color: #555;
      text-align: center;
      max-width: 480px;
      margin: 0;
    }
    [data-theme="dark"] .cta-subtitle {
      color: #999;
    }
    .cta-title {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 48px;
      font-weight: 450;
      color: var(--text);
      letter-spacing: 0;
      line-height: 1.15;
      max-width: 650px;
      margin: 0;
    }

    /* MEGA FOOTER */
    .mega-footer {
      position: relative;
      z-index: 10;
      background: var(--bg);
      align-self: stretch;
      padding-top: 20px;
      height: 21vw;
      overflow: hidden;
    }
    .mega-footer::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60%;
      background: linear-gradient(to bottom, transparent, var(--bg));
      pointer-events: none;
      z-index: 1;
    }
    .mega-footer-word {
      position: relative;
      display: block;
      width: 100%;
      text-align: center;
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 30vw;
      font-weight: 800;
      letter-spacing: -0.04em;
      line-height: 0.85;
      color: var(--bg);
      paint-order: stroke fill;
      -webkit-text-stroke: 1.5px rgba(27, 23, 21, 0.1);
      user-select: none;
      cursor: default;
    }
    [data-theme="dark"] .mega-footer-word {
      -webkit-text-stroke-color: rgba(238, 238, 230, 0.08);
    }
    @keyframes megaFooterDrift {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .mega-footer-word::after {
      content: 'Candid';
      position: absolute;
      inset: 0;
      color: transparent;
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke: 0;
      background: radial-gradient(ellipse 30% 80% at 50% 50%, rgba(163, 164, 152, 0.2) 0%, transparent 100%);
      background-size: 300% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      pointer-events: none;
      animation: megaFooterDrift 8s ease-in-out infinite;
    }
    .mega-footer-word::before {
      content: 'Candid';
      position: absolute;
      inset: 0;
      color: transparent;
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke: 0;
      background: radial-gradient(circle 250px at var(--mx, -500px) var(--my, -500px), rgba(163, 164, 152, 0.2) 0%, transparent 100%);
      -webkit-background-clip: text;
      background-clip: text;
      pointer-events: none;
      z-index: 1;
    }
    [data-theme="dark"] .mega-footer-word::before {
      background: radial-gradient(circle 250px at var(--mx, -500px) var(--my, -500px), rgba(163, 164, 152, 0.15) 0%, transparent 100%);
      -webkit-background-clip: text;
      background-clip: text;
    }
    .mega-footer-char {
      display: inline-block;
    }

    /* FOOTER */
    footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 20;
      background: var(--footer-gradient);
    }
    .footer-inner {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: calc(100% - 100px);
      max-width: 1300px;
      margin: 0 auto;
      padding: 15px 0;
      background-color: rgba(255, 255, 255, 0);
    }
    .footer-container {
      flex: 1 0 0px;
      width: 1px;
      height: min-content;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    .footer-columns {
      flex: 1 0 0px;
      width: 1px;
      height: min-content;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 5px;
    }
    .footer-row {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      gap: 10px;
      width: 100%;
    }
    .footer-link-wrapper {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    .footer-link {
      font-family: "Inter", sans-serif;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: -0.01em;
      line-height: 11px;
      color: var(--text);
      position: relative;
      display: inline-block;
    }
    .footer-right {
      flex: 1 0 0px;
      width: 1px;
      height: min-content;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      gap: 10px;
    }
    .footer-copy {
      font-family: "Inter", sans-serif;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: -0.01em;
      line-height: 11px;
      color: var(--text);
      white-space: pre;
    }

    /* MOBILE RESPONSIVE */
    @media (max-width: 1099.98px) {
      .theme-toggle {
        display: none;
      }
      body {
        background-color: var(--bg);
      }
      .framer-page {
        width: 100%;
        margin: 0 auto;
      }
      .nav-container {
        width: calc(100% - 40px);
        padding: 15px 0;
      }
      .nav-links {
        display: none;
      }
      .mobile-menu-btn {
        display: block;
      }
      .main-content {
        width: 100%;
        padding: 120px 20px 0 20px;
        box-sizing: border-box;
        justify-content: flex-start;
        flex-direction: column;
      }
      .hero-split {
        flex-direction: column;
        gap: 32px;
        width: calc(100% - 24px);
      }
      .showcase-section {
        width: 100%;
        margin: 0 auto;
        aspect-ratio: 4 / 3;
      }
      .showcase-section::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(240, 239, 231, 0.85);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 1;
      }
      .hero-mobile-embed {
        z-index: 2;
      }
      .showcase-screenshot {
        display: none;
      }
      .hero-mobile-embed {
        display: flex;
        position: absolute;
        top: 8%; left: 50%; bottom: 8%;
        transform: translateX(-50%);
        width: 85%;
        z-index: 2;
        pointer-events: none;
        box-sizing: border-box;
      }
      .hero-mobile-stage {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        min-height: 100%;
        transform: scale(0.88);
        transform-origin: center center;
      }
      .hero-mobile-card {
        width: 100%;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 8px 40px rgba(0,0,0,0.10), 0 1.5px 6px rgba(0,0,0,0.04);
        padding: 14px 16px;
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .hero-mobile-card.show {
        opacity: 1;
        transform: translateY(0);
      }
      .hero-mobile-card.slide-out {
        opacity: 0;
        transform: translateY(-30px) scale(0.96);
        transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .hero-mobile-card-header {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .hero-mobile-card-avatar {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        overflow: hidden;
        flex-shrink: 0;
      }
      .hero-mobile-card-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .hero-mobile-card-title {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 16px;
        font-weight: 450;
        color: #1B1715;
      }
      .hero-mobile-card-expand {
        margin-top: 0;
        width: 100%;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .hero-mobile-card-expand.visible {
        margin-top: 14px;
      }
      .hero-mobile-card-expand-inner {
        position: relative;
      }
      .hero-mobile-card-body {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 14.5px;
        line-height: 1.6;
        color: #1B1715;
        font-weight: 400;
      }
      .hero-mobile-card-body .word {
        display: inline;
        opacity: 0;
        filter: blur(4px);
        transition: opacity 0.18s ease, filter 0.18s ease;
      }
      .hero-mobile-card-body .word.show {
        opacity: 1;
        filter: blur(0);
      }
      .hero-mobile-card-body .highlight {
        background: rgba(250, 204, 21, 0.25);
        padding: 1px 3px;
        border-radius: 3px;
      }
      .hero-mobile-card-body .highlight-blue {
        background: rgba(59, 130, 246, 0.12);
        padding: 1px 3px;
        border-radius: 3px;
      }
      .hero-mobile-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 10px;
      }
      .hero-mobile-pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 7px;
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 12px;
        font-weight: 450;
        color: #1B1715;
        background: #fff;
        border: 1px solid rgba(27,23,21,0.07);
        border-radius: 999px;
        white-space: nowrap;
        opacity: 0;
        transform: scale(0.85);
        transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .hero-mobile-pill.show {
        opacity: 1;
        transform: scale(1);
      }
      .hero-mobile-pill-check {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
      }
      .hero-mobile-pill.show .hero-mobile-pill-check path {
        animation: heroMobilePillCheck 0.35s ease 0.15s forwards;
      }
      @keyframes heroMobilePillCheck {
        to { stroke-dashoffset: 0; }
      }
      .hero-mobile-mid-pill {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%) translateY(12px) scale(0.9);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 22px;
        background: #fff;
        border-radius: 999px;
        box-shadow: 0 8px 40px rgba(0,0,0,0.10), 0 1.5px 6px rgba(0,0,0,0.04);
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 15px;
        font-weight: 450;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.4s;
        white-space: nowrap;
      }
      .hero-mobile-mid-pill.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, -50%) translateY(0) scale(1);
        transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
      }
      .hero-mobile-mid-pill.show span {
        background: linear-gradient(90deg, rgba(80,130,190,0.7) 0%, rgba(80,130,190,0.7) 40%, rgba(80,130,190,0.25) 50%, rgba(80,130,190,0.7) 60%, rgba(80,130,190,0.7) 100%);
        background-size: 200% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: textShimmer 2.5s ease-in-out infinite;
      }
      .hero-mobile-mid-pill.fade-out {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, -50%) translateY(-10px) scale(0.95);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
      }
      .hero-mobile-mid-pill.fade-out span {
        -webkit-text-fill-color: transparent;
      }
      .hero-mobile-pill-sparkle {
        width: 13px;
        height: 13px;
        color: rgba(80,130,190,0.6);
        animation: sparkleSpin 3s ease-in-out infinite;
      }
      .hero-mobile-mid-pill.show .hero-mobile-pill-sparkle {
        background: linear-gradient(90deg, rgba(80,130,190,0.55) 0%, rgba(80,130,190,0.55) 40%, rgba(80,130,190,0.15) 50%, rgba(80,130,190,0.55) 60%, rgba(80,130,190,0.55) 100%);
        background-size: 200% 100%;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.2633 2.13337L9.97925 0.806375C9.74925 -0.268625 8.21525 -0.268625 7.98625 0.805375L7.70225 2.13238C7.10525 4.92438 4.92425 7.10437 2.13325 7.70137L0.80625 7.98537C-0.26875 8.21537 -0.26875 9.74838 0.80625 9.97838L2.13325 10.2624C4.92525 10.8594 7.10525 13.0404 7.70225 15.8314L7.98625 17.1594C8.21625 18.2344 9.74925 18.2344 9.97925 17.1594L10.2633 15.8324C10.8603 13.0404 13.0413 10.8604 15.8323 10.2634L17.1593 9.97937C18.2343 9.74937 18.2343 8.21637 17.1593 7.98637L15.8323 7.70237C13.0403 7.10537 10.8603 4.92437 10.2633 2.13337Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.2633 2.13337L9.97925 0.806375C9.74925 -0.268625 8.21525 -0.268625 7.98625 0.805375L7.70225 2.13238C7.10525 4.92438 4.92425 7.10437 2.13325 7.70137L0.80625 7.98537C-0.26875 8.21537 -0.26875 9.74838 0.80625 9.97838L2.13325 10.2624C4.92525 10.8594 7.10525 13.0404 7.70225 15.8314L7.98625 17.1594C8.21625 18.2344 9.74925 18.2344 9.97925 17.1594L10.2633 15.8324C10.8603 13.0404 13.0413 10.8604 15.8323 10.2634L17.1593 9.97937C18.2343 9.74937 18.2343 8.21637 17.1593 7.98637L15.8323 7.70237C13.0403 7.10537 10.8603 4.92437 10.2633 2.13337Z'/%3E%3C/svg%3E");
        -webkit-mask-size: contain;
        mask-size: contain;
        animation: textShimmer 2.5s ease-in-out infinite, sparkleSpin 3s ease-in-out infinite;
      }
      /* Hero mobile outreach card - matches outreach embed exactly */
      .hero-mobile-otl-card {
        position: absolute;
        top: 50%; left: 0; width: 100%;
        box-sizing: border-box;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 8px 40px rgba(0,0,0,0.10), 0 1.5px 6px rgba(0,0,0,0.04);
        padding: 20px 24px;
        opacity: 0;
        transform: translateY(calc(-50% + 30px)) scale(0.97);
        transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        font-family: 'Inter', system-ui, sans-serif;
        -webkit-font-smoothing: antialiased;
      }
      .hero-mobile-otl-card.show {
        opacity: 1;
        transform: translateY(-50%) scale(1);
      }
      .hero-mobile-otl-card.slide-out {
        opacity: 0;
        transform: translateY(calc(-50% - 40px)) scale(0.96);
        transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .hero-mobile-otl-header {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .hero-mobile-otl-icon {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
      }
      .hero-mobile-otl-icon svg {
        width: 22px;
        height: 22px;
      }
      .hero-mobile-otl-title {
        font-size: 16px;
        font-weight: 450;
        color: #1B1715;
      }
      .hero-mobile-otl-expand {
        margin-top: 0;
        width: 100%;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .hero-mobile-otl-expand.visible {
        margin-top: 16px;
      }
      .hero-mobile-otl-expand-inner {
        position: relative;
      }
      .hero-mobile-otl-body {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 14.5px;
        line-height: 1.6;
        color: #1B1715;
        font-weight: 400;
      }
      .hero-mobile-otl-body .word {
        display: inline;
        opacity: 0;
        filter: blur(4px);
        transition: opacity 0.18s ease, filter 0.18s ease;
      }
      .hero-mobile-otl-body .word.show {
        opacity: 1;
        filter: blur(0);
      }
      .hero-mobile-otl-body .highlight {
        background: rgba(245,158,11,0.12);
        border-radius: 3px;
        padding: 0 2px;
      }
      .hero-mobile-otl-body .highlight-blue {
        background: rgba(59,130,246,0.10);
        border-radius: 3px;
        padding: 0 2px;
      }
      .hero-mobile-otl-body.sent-blur {
        filter: blur(3px);
        opacity: 0.3;
        transition: filter 0.4s ease, opacity 0.4s ease;
      }
      .hero-mobile-otl-sent {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        opacity: 0;
        transform: scale(0.9);
        transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
      }
      .hero-mobile-otl-sent.visible {
        opacity: 1;
        transform: scale(1);
      }
      .hero-mobile-otl-sent svg {
        width: 20px;
        height: 20px;
      }
      .hero-mobile-otl-sent span {
        font-size: 14px;
        font-weight: 450;
        color: #16a34a;
      }
      .hero-mobile-otl-reply-pill {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%) translateY(12px) scale(0.9);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 22px;
        background: #fff;
        border: 0.69px solid rgba(27,23,21,0.10);
        border-radius: 24px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 15px;
        font-weight: 450;
        color: #1B1715;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.4s;
        white-space: nowrap;
      }
      .hero-mobile-otl-reply-pill.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, -50%) translateY(0) scale(1);
        transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
      }
      .hero-mobile-otl-reply-pill.show span {
        background: none;
        -webkit-text-fill-color: #1B1715;
      }
      .hero-mobile-otl-reply-pill.fade-out {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, -50%) translateY(-10px) scale(0.95);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
      }
      .hero-mobile-otl-reply-check {
        width: 20px; height: 20px; flex-shrink: 0;
      }
      .hero-mobile-otl-reply-check path {
        stroke-dasharray: 20;
        stroke-dashoffset: 20;
      }
      .hero-mobile-otl-reply-pill.show .hero-mobile-otl-reply-check path {
        animation: calCheckDraw 0.35s ease 0.2s forwards;
      }

      .app-shell {
        width: 440px;
        height: 640px;
      }
      .app-drawer {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 10px;
      }
      .app-drawer-header {
        padding: 10px 14px;
      }
      .app-drawer-body-wrapper {
        flex: 1;
        min-height: 0;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .app-drawer-body-wrapper::-webkit-scrollbar {
        display: none;
      }
      .app-drawer-body {
        flex-direction: column;
        flex: none;
        gap: 0;
        padding: 0 14px;
      }
      .app-drawer-left {
        width: 100%;
        padding-right: 0;
        overflow: visible;
      }
      .app-drawer-right {
        width: 100%;
        padding: 0 0 24px 0;
        overflow: visible;
      }
      .app-skills,
      .skills-title {
        display: none;
      }
      .app-fit-lines + .app-fit-lines {
        display: none;
      }
      .app-drawer-action .kbd {
        display: none;
      }
      .later-btn {
        display: none;
      }
      .app-drawer-header-right > .app-drawer-action:not(.shortlist-btn):not(.reject-btn):not(.later-btn) {
        display: none;
      }
      .app-drawer-nav {
        display: flex !important;
      }
      .hero-shortlist-toast {
        width: 100%;
        top: 0;
        left: 0;
        border-radius: 0;
      }
      .hero-shortlist-toast-card {
        padding: 16px 20px;
        border-radius: 0;
      }
      .hero-shortlist-toast-text {
        font-size: 17px;
      }
      .hero-shortlist-toast-check {
        width: 26px;
        height: 26px;
      }
      .hero-shortlist-toast-check svg {
        width: 26px;
        height: 26px;
      }
      .hero-shortlist-email-body {
        font-size: 15px;
      }
      .hero-shortlist-sent {
        font-size: 15px;
      }
      .hero-reject-modal {
        width: 100%;
        top: 0;
        left: 0;
        border-radius: 0;
      }
      .hero-reject-modal-card {
        padding: 16px 20px;
        border-radius: 0;
      }
      .hero-reject-modal-text {
        font-size: 17px;
      }
      .hero-reject-modal-check {
        width: 26px;
        height: 26px;
      }
      .hero-reject-modal-check svg {
        width: 26px;
        height: 26px;
      }
      .hero-reject-feedback-body {
        font-size: 15px;
      }
      .hero-reject-sent {
        font-size: 15px;
      }
      .hero-reject-learning {
        font-size: 15px;
      }
      .hero-reply-toast {
        width: 100%;
        top: 0;
        right: 0;
        border-radius: 0;
      }
      .hero-reply-toast-card {
        padding: 14px 18px;
        border-radius: 0;
      }
      .hero-reply-pill {
        display: none;
      }
      .text-content {
        width: 100%;
        max-width: 100%;
        text-align: center;
        align-items: center;
        flex-shrink: unset;
      }
      .text-inner {
        gap: 20px;
      }
      .hero-preview-pill {
        display: none;
      }
      .manifesto {
        font-size: 38px !important;
        line-height: 1.2em !important;
        text-align: center;
      }
      .manifesto-body {
        font-size: 16.5px !important;
        line-height: 1.5em !important;
        text-align: center;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
      }
      .btn-row {
        justify-content: center;
        margin-top: 0px;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
      }
      .footer-inner {
        width: calc(100% - 40px);
        padding: 15px 0;
      }
      .footer-container {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 0;
      }
      .footer-link[href="./careers/"],
      .footer-link[href="./scout/"] {
        display: none;
      }
      .footer-right .footer-link-wrapper {
        display: none;
      }
      .footer-columns {
        gap: 10px;
      }
      .footer-right {
        width: auto;
        flex-direction: row;
        justify-content: flex-end;
        gap: 16px;
      }
      footer {
        position: relative;
        bottom: auto;
      }
      .mobile-br { display: inline; }
      .cta-title {
        font-size: 34px;
        line-height: 1.2em;
      }
      .cta-subtitle {
        font-size: 14.5px;
        line-height: 1.5em;
      }
      .cta-section {
        gap: 20px;
        padding: 50px 24px 50px;
      }
      .mega-footer {
        height: 38vw;
        padding-top: 40px;
      }
      /* Mini shell / sourcing mobile */
      .mini-shell {
        width: 440px;
        height: 580px;
      }
      .mini-drawer .app-drawer-left {
        width: 100% !important;
        padding-top: 24px;
        padding-bottom: 0;
      }
      .mini-drawer .app-summary-lines {
        display: none;
      }
      .mini-drawer .app-drawer-left .app-section-title {
        display: none;
      }
      .mini-drawer .app-exp-item {
        display: none;
      }
      .mini-drawer .app-drawer-right {
        width: 100% !important;
        padding: 0 0 14px 0;
      }
      .mini-drawer .app-drawer-nav-btn {
        display: none;
      }
      .mini-action-island {
        justify-content: center;
        margin: 8px 14px 4px 14px;
      }
      .mini-island-btns {
        width: 100%;
      }
      .mini-island-btn {
        flex: 1;
      }
      .mini-drawer .app-link-btn:first-child {
        display: none;
      }
      .mini-drawer .app-drawer-right > div[style*="border"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
      }
      .mini-drawer .app-scorecard-item span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 15px;
      }
      .mini-drawer .app-candidate-avatar {
        width: 58px;
        height: 58px;
      }
      .mini-drawer .app-candidate-name {
        font-size: 22px;
      }
      .mini-drawer .app-candidate-title {
        font-size: 17px;
      }
      .mini-drawer .app-candidate-name-row {
        padding-bottom: 5px !important;
      }
      .mini-drawer .app-candidate-header {
        gap: 14px;
      }
      .mini-shortlist-toast {
        top: 48px;
        left: 14px;
        right: 14px;
        width: auto;
      }
      .mini-shortlist-toast-card {
        padding: 16px 20px;
      }
      .mini-shortlist-toast-text {
        font-size: 17px;
      }
      .mini-shortlist-toast-check {
        width: 26px;
        height: 26px;
      }
      .mini-shortlist-toast-check svg {
        width: 26px;
        height: 26px;
      }
      .mini-hiring-bar-toast {
        top: 14px;
        left: 14px;
      }
      .mini-reject-modal {
        top: 48px;
        left: 14px;
        right: 14px;
        width: auto;
      }
      .mini-reject-modal-card {
        padding: 16px 20px;
      }
      .mini-reject-modal-text {
        font-size: 17px;
      }
      .mini-reject-modal-check {
        width: 26px;
        height: 26px;
      }
      .mini-reject-modal-check svg {
        width: 26px;
        height: 26px;
      }
      .mini-reject-feedback-body {
        font-size: 17px;
      }
      .mini-reject-sent {
        font-size: 17px;
      }
      .mini-reject-learning {
        font-size: 17px;
      }
    }

    /* MODAL */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease;
    }
    .modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }
    .modal {
      background: #F5F3EE;
      border-radius: 12px;
      padding: 30px;
      width: 100%;
      max-width: 460px;
      max-height: 80vh;
      overflow-y: auto;
      margin: 20px;
      position: relative;
      transform: translateY(20px);
      transition: transform 0.2s ease;
    }
    .modal-overlay.active .modal {
      transform: translateY(0);
    }
    .modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: var(--text);
      opacity: 0.5;
      transition: opacity 0.2s;
      line-height: 1;
    }
    .modal-close:hover {
      opacity: 1;
    }
    .modal-title {
      font-family: 'Inter', sans-serif;
      font-size: 22px;
      font-weight: 550;
      letter-spacing: -0.01em;
      line-height: 1.2;
      color: var(--text);
      margin-bottom: 12px;
    }
    .modal-subtitle {
      font-family: "Inter", sans-serif;
      font-size: 14px;
      font-weight: 400;
      color: var(--text);
      opacity: 0.6;
      margin-bottom: 12px;
    }
    .modal-body {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.6;
      color: #555;
      margin-bottom: 24px;
    }
    /* INTEGRATIONS MODAL */
    .int-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease;
    }
    .int-modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }
    .int-modal {
      background: var(--bg);
      border-radius: 14px;
      width: 100%;
      max-width: 680px;
      height: 80vh;
      margin: 20px;
      position: relative;
      transform: translateY(20px);
      transition: transform 0.2s ease;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .int-modal-overlay.active .int-modal {
      transform: translateY(0);
    }
    .int-modal-header {
      padding: 28px 28px 0;
      flex-shrink: 0;
    }
    .int-modal-title {
      font-family: 'Inter', sans-serif;
      font-size: 20px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--text);
      margin-bottom: 4px;
    }
    .int-modal-subtitle {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: #888;
      margin-bottom: 20px;
    }
    .int-modal-search {
      width: 100%;
      padding: 10px 14px 10px 36px;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      border: 1px solid rgba(27,23,21,0.12);
      border-radius: 8px;
      background: var(--bg);
      color: var(--text);
      outline: none;
      transition: border-color 0.15s;
      box-sizing: border-box;
    }
    .int-modal-search:focus {
      border-color: rgba(27,23,21,0.3);
    }
    .int-modal-search-wrap {
      position: relative;
      margin-bottom: 20px;
    }
    .int-modal-search-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
      pointer-events: none;
    }
    .int-modal-body-wrap {
      flex: 1;
      position: relative;
      min-height: 0;
      overflow: hidden;
    }
    .int-modal-body {
      padding: 0 28px 28px;
      overflow-y: auto;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    .int-modal-body-wrap::before,
    .int-modal-body-wrap::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 20px;
      pointer-events: none;
      z-index: 2;
      opacity: 0;
      transition: opacity 0.15s ease;
    }
    .int-modal-body-wrap::before {
      top: 0;
      background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
    }
    .int-modal-body-wrap::after {
      bottom: 0;
      background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
    }
    .int-modal-body-wrap.fade-top::before { opacity: 1; }
    .int-modal-body-wrap.fade-bottom::after { opacity: 1; }
    .int-modal-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .int-modal-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      background: #fff;
      border: 1px solid rgba(27,23,21,0.08);
      border-radius: 10px;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .int-modal-card:hover {
      border-color: rgba(27,23,21,0.18);
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    .int-modal-card img {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      flex-shrink: 0;
    }
    .int-modal-card-info {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
      line-height: 1.2;
    }
    .int-modal-card-name {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 450;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .int-modal-card-cat {
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      color: #999;
    }
    .int-modal-empty {
      grid-column: 1 / -1;
      text-align: center;
      padding: 40px 0;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: #999;
    }
    .int-modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: var(--text);
      opacity: 0.5;
      transition: opacity 0.2s;
      line-height: 1;
      z-index: 1;
    }
    .int-modal-close:hover {
      opacity: 1;
    }
    @media (max-width: 768px) {
      .int-modal {
        height: 90vh;
        margin: 10px;
        border-radius: 12px;
      }
      .int-modal-header {
        padding: 20px 20px 0;
      }
      .int-modal-body {
        padding: 0 20px 20px;
      }
      .int-modal-body-wrap {
        overflow: hidden;
      }
      .int-modal-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .int-modal-card {
        padding: 12px 14px;
      }
    }

    .form-group {
      margin-bottom: 16px;
    }
    .form-row {
      display: flex;
      gap: 12px;
    }
    .form-group-half {
      flex: 1;
    }
    .form-textarea {
      resize: vertical;
      min-height: 80px;
    }
    .form-label {
      display: block;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      letter-spacing: 0;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 6px;
    }
    .form-input {
      width: 100%;
      padding: 12px 14px;
      font-family: 'Inter', sans-serif;
      letter-spacing: 0;
      font-size: 15px;
      color: var(--text);
      background: transparent;
      border: 1px solid rgba(128, 128, 128, 0.3);
      border-radius: 8px;
      outline: none;
      transition: border-color 0.2s;
    }
    .form-input::placeholder {
      color: var(--text);
      opacity: 0.4;
    }
    .form-input:focus {
      border-color: rgba(128, 128, 128, 0.6);
    }
    .form-submit {
      width: 100%;
      margin-top: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 48px;
      padding: 10px 20px;
      background-color: #A3A498;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 1000px;
      border: none;
      font-family: "Inter", sans-serif;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: rgb(244, 244, 238);
      cursor: not-allowed;
      transition: background-color 0.2s, opacity 0.2s;
      opacity: 0.5;
    }
    .form-submit.active {
      background-color: #A3A498;
      cursor: pointer;
      opacity: 1;
    }
    .form-submit.active:hover {
      background-color: rgba(163, 164, 152, 0.8);
    }
    [data-theme="dark"] .form-submit {
      background-color: #EEEEE6;
      color: #191918;
    }
    [data-theme="dark"] .form-submit.active:hover {
      background-color: rgba(238, 238, 230, 0.85);
    }
    .form-submit:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .cf-turnstile {
      margin-top: 16px;
    }
    .form-success {
      text-align: center;
      padding: 20px 0;
    }
    .form-success-icon {
      margin-bottom: 16px;
      display: flex;
      justify-content: center;
    }
    .form-success-text {
      font-family: "Inter", sans-serif;
      font-size: 15px;
      font-weight: 450;
      color: #1B1715;
    }
    [data-theme="dark"] .form-success-text {
      color: var(--text);
    }
    [data-theme="dark"] .form-success-icon svg path {
      fill: var(--text);
    }

    @media (max-width: 1099.98px) {
      .modal {
        padding: 30px;
      }
    }