@charset "utf-8";

 :root {
   --ink: #0A0A0A;
   --ink-2: #6E6E73;
   --ink-3: #A1A1A6;
   --border: #EDEDED;
   --border-2: #DCDCDC;
   --bg: #EBEBEE;
   --section-bg: #FAFAFA;
   --muted-tint: #F2F2F4;
   --ease: cubic-bezier(0.22, 1, 0.36, 1);
 }

 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 *,
 ::before,
 ::after {
   font-family: 'Inter', system-ui, -apple-system, sans-serif;
 }

 html {
   -webkit-font-smoothing: antialiased;
   max-width: 100%;
   overflow-x: hidden;
 }

 body {
   background: var(--bg);
   color: var(--ink);
   font-size: 0.875rem;
   line-height: 1.5;
   min-height: 100vh;
   max-width: 100%;
   overflow-x: hidden;
 }

 ::selection {
   background: var(--ink);
   color: white;
 }

 .nav {
   position: sticky;
   top: 0;
   z-index: 50;
   background: rgba(235, 235, 238, 0.78);
   backdrop-filter: saturate(180%) blur(1.25rem);
   border-bottom: 1px solid rgba(0, 0, 0, 0.04);
 }


 .nav-inner {
   max-width: 75rem;
   margin: 0 auto;
   padding: 0.5rem 1.5rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
 }

 .nav-brand {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   color: var(--ink);
   text-decoration: none;
   flex: 1;
 }

 .nav-brand-mark {
   width: 1.375rem;
   height: 1.375rem;
   flex-shrink: 0;
 }

 .nav-brand-mark svg {
   width: 100%;
   height: 100%;
   display: block;
 }

 .nav-brand-word {
   font-size: 0.90625rem;
   font-weight: 500;
   letter-spacing: -0.012em;
 }

 .nav-actions {
   display: flex;
   align-items: center;
   gap: 0.375rem;
   flex: 1;
   justify-content: flex-end;
 }

 .nav-link {
   padding: 0.5rem 0.75rem;
   color: var(--ink-2);
   text-decoration: none;
   font-size: 0.8125rem;
   font-weight: 400;
   letter-spacing: -0.005em;
   border-radius: 0.75rem;
   transition: color 0.2s var(--ease), background 0.2s var(--ease);
 }

 .nav-link:hover {
   color: var(--ink);
   background: rgba(0, 0, 0, 0.04);
 }

 .nav-cta {
   padding: 0.5rem 0.875rem;
   background: var(--ink);
   color: white;
   text-decoration: none;
   font-size: 0.8125rem;
   font-weight: 500;
   letter-spacing: -0.005em;
   border-radius: 0.75rem;
   transition: background 0.2s var(--ease);
   margin-left: 0.25rem;
 }

 .nav-cta:hover {
   background: rgb(26, 26, 26);
 }

 @media (max-width: 600px) {
   .nav-link.is-mobile-hidden {
     display: none;
   }
 }

 .hero {
   max-width: 45rem;
   margin: 0 auto;
   padding: 4.75rem 1.5rem 1.75rem;
   text-align: center;
 }

 .hero-title {
   font-size: clamp(2rem, 5vw, 3rem);
   font-weight: 500;
   letter-spacing: -0.038em;
   line-height: 1.05;
   color: var(--ink);
   margin-bottom: 1.125rem;
 }

 .hero-title em {
   font-style: normal;
   color: var(--ink-3);
 }

 .hero-sub {
   font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
   color: var(--ink-2);
   letter-spacing: -0.012em;
   line-height: 1.5;
   max-width: 32.5rem;
   margin: 0 auto 2.25rem;
 }

 .search-wrap {
   max-width: 36.25rem;
   margin: 0 auto 1.625rem;
   position: relative;
 }

 .search-bar {
   display: flex;
   align-items: center;
   background: white;
   border: 1px solid var(--border-2);
   border-radius: 99.9rem;
   padding: 0.25rem 1.25rem;
   box-shadow: rgba(20, 25, 40, 0.024) 0 0.0625rem 0.125rem, rgba(20, 25, 40, 0.04) 0 0.25rem 0.875rem;
   transition: border-color 0.2s var(--ease), box-shadow 0.3s var(--ease);
 }

 .search-bar:focus-within {
   border-color: var(--ink);
   box-shadow: rgba(20, 25, 40, 0.04) 0 0.0625rem 0.125rem, rgba(20, 25, 40, 0.08) 0 0.5rem 1.5rem;
 }

 .search-icon {
   width: 32px;
   height: 32px;
   object-fit: contain;
   color: var(--ink-3);
   flex-shrink: 0;
   margin-right: 0.625rem;
 }

 .search-input {
   flex: 1 1 0%;
   border-width: medium;
   border-style: none;
   border-color: currentcolor;
   border-image: initial;
   background: transparent;
   font-family: inherit;
   font-size: 0.90625rem;
   color: var(--ink);
   letter-spacing: -0.008em;
   padding: 0.6875rem 0;
   outline: none;
   min-width: 0;
 }

 .search-input::placeholder {
   color: var(--ink-3);
 }

 .filters {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 0.5rem;
   max-width: 45rem;
   margin: 0 auto 1.25rem;
 }

 .filter,
 .filter-toggle-wrap {
   position: relative;
 }

 .filter-chip {
   display: inline-flex;
   align-items: center;
   background: white;
   border: 1px solid var(--border);
   border-radius: 0.75rem;
   font-family: inherit;
   font-size: 0.78125rem;
   font-weight: 500;
   color: var(--ink-2);
   letter-spacing: -0.005em;
   line-height: 1.2;
   white-space: nowrap;
   transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
 }

 button.filter-chip {
   gap: 0.4375rem;
   padding: 0.5rem 0.875rem 0.5rem 1rem;
   cursor: pointer;
 }

 div.filter-chip {
   padding: 0;
 }

 .filter-chip:hover {
   border-color: var(--border-2);
   color: var(--ink);
 }

 .filter-chip.is-active {
   background: var(--ink);
   border-color: var(--ink);
   color: white;
 }

 .filter-chip-chevron {
   width: 0.625rem;
   height: 0.625rem;
   transition: transform 0.2s var(--ease);
   flex-shrink: 0;
 }

 .filter.is-open .filter-chip-chevron {
   transform: rotate(180deg);
 }

 .filter-chip-tick {
   width: 0.75rem;
   height: 0.75rem;
   flex-shrink: 0;
 }

 .filter-chip-main {
   display: inline-flex;
   align-items: center;
   gap: 0.4375rem;
   padding: 0.5rem 0.625rem 0.5rem 1rem;
   background: transparent;
   border-width: medium;
   border-style: none;
   border-color: currentcolor;
   border-image: initial;
   color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
   line-height: inherit;
   cursor: pointer;
   white-space: nowrap;
 }

 .filter-chip-clear {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 1.375rem;
   height: 1.375rem;
   margin-right: 0.375rem;
   padding: 0;
   background: rgba(255, 255, 255, 0.16);
   border-width: medium;
   border-style: none;
   border-color: currentcolor;
   border-image: initial;
   border-radius: 50%;
   color: white;
   cursor: pointer;
   transition: background 0.15s var(--ease);
   flex-shrink: 0;
 }

 .filter-chip-clear:hover {
   background: rgba(255, 255, 255, 0.3);
 }

 .filter-chip-clear svg {
   width: 0.6875rem;
   height: 0.6875rem;
 }

 .filter-popover {
   position: absolute;
   top: calc(100% + 0.375rem);
   left: 0;
   background: white;
   border: 1px solid var(--border);
   border-radius: 0.875rem;
   padding: 0.3125rem;
   box-shadow: rgba(20, 25, 40, 0.04) 0 0.0625rem 0.125rem, rgba(20, 25, 40, 0.1) 0 0.75rem 2rem;
   z-index: 30;
   min-width: 13.75rem;
   display: none;
   animation: popIn 0.18s var(--ease);
 }

 .filter.is-open .filter-popover {
   display: block;
 }

 .filter-popover.is-wide {
   min-width: 16.25rem;
 }

 .filter-popover.is-right {
   left: auto;
   right: 0;
   min-width: 11.25rem;
 }

 .filter-search {
   padding: 0.25rem 0.25rem 0.375rem;
   border-bottom: 1px solid var(--border);
   margin-bottom: 0.25rem;
 }

 .filter-search-input {
   width: 100%;
   border-width: medium;
   border-style: none;
   border-color: currentcolor;
   border-image: initial;
   background: var(--section-bg);
   border-radius: 0.5rem;
   padding: 0.5rem 0.6875rem;
   font-family: inherit;
   font-size: 0.78125rem;
   color: var(--ink);
   letter-spacing: -0.005em;
   outline: none;
   transition: background 0.15s var(--ease);
 }

 .filter-search-input:focus {
   background: var(--muted-tint);
 }

 .filter-search-input::placeholder {
   color: var(--ink-3);
 }

 .filter-options-list {
   max-height: 15rem;
   overflow-y: auto;
 }

 .filter-options-empty {
   padding: 0.875rem 0.75rem 0.75rem;
   text-align: center;
   font-size: 0.75rem;
   color: var(--ink-3);
   letter-spacing: -0.005em;
 }

 .filter-option {
   display: flex;
   align-items: center;
   width: 100%;
   padding: 0.5625rem 0.75rem;
   background: transparent;
   border-width: medium;
   border-style: none;
   border-color: currentcolor;
   border-image: initial;
   text-align: left;
   font-family: inherit;
   font-size: 0.8125rem;
   color: var(--ink-2);
   border-radius: 0.5625rem;
   cursor: pointer;
   letter-spacing: -0.005em;
   gap: 0.75rem;
   transition: background 0.15s var(--ease), color 0.15s var(--ease);
 }

 .filter-option:hover {
   background: var(--section-bg);
   color: var(--ink);
 }

 .filter-option.is-selected {
   background: var(--muted-tint);
   color: var(--ink);
   font-weight: 500;
 }

 .filter-option-label {
   flex: 1 1 0%;
   text-align: left;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

 .filter-option-count {
   color: var(--ink-3);
   font-size: 0.6875rem;
   font-weight: 400;
   font-variant-numeric: tabular-nums;
   flex-shrink: 0;
 }

 .filter-option.is-selected .filter-option-count {
   color: var(--ink-2);
 }

 .filter-option-tick {
   width: 0.8125rem;
   height: 0.8125rem;
   color: var(--ink);
   opacity: 0;
   flex-shrink: 0;
 }

 .filter-option.is-selected .filter-option-tick {
   opacity: 1;
 }

 @keyframes popIn {
   0% {
     opacity: 0;
     transform: translateY(-0.25rem);
   }

   100% {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .empty-state {
   grid-column: 1 / -1;
   text-align: center;
   padding: 4rem 1.5rem;
   background: white;
   border: 1px solid var(--border);
   border-radius: 1.125rem;
 }

 .empty-state-title {
   font-size: 1rem;
   font-weight: 500;
   color: var(--ink);
   letter-spacing: -0.018em;
   margin-bottom: 0.375rem;
 }

 .empty-state-sub {
   font-size: 0.8125rem;
   color: var(--ink-2);
   letter-spacing: -0.005em;
   margin-bottom: 1.125rem;
 }

 .empty-state-action {
   display: inline-flex;
   align-items: center;
   background: var(--ink);
   color: white;
   border-width: medium;
   border-style: none;
   border-color: currentcolor;
   border-image: initial;
   border-radius: 0.75rem;
   padding: 0.5625rem 1rem;
   font-family: inherit;
   font-size: 0.78125rem;
   font-weight: 500;
   letter-spacing: -0.005em;
   cursor: pointer;
   transition: background 0.2s var(--ease);
 }

 .empty-state-action:hover {
   background: rgb(26, 26, 26);
 }

 .trust-strip {
   text-align: center;
   margin: 1.75rem auto 0;
   font-size: 0.71875rem;
   color: var(--ink-3);
   letter-spacing: -0.003em;
   line-height: 1.5;
   font-variant-numeric: tabular-nums;
 }

 .trust-strip strong {
   color: var(--ink-2);
   font-weight: 500;
 }

 .trust-strip-sep {
   color: var(--ink-3);
   margin: 0 0.5rem;
 }

 .results {
   max-width: 75rem;
   margin: 0 auto;
   padding: 2.75rem 1.5rem 4rem;
 }

 .results-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 1.625rem;
   gap: 0.75rem;
   flex-wrap: wrap;
 }

 .results-eyebrow {
   font-size: 0.59375rem;
   color: var(--ink-3);
   letter-spacing: 0.18em;
   text-transform: uppercase;
   font-weight: 500;
 }

 .results-count {
   font-size: 0.75rem;
   color: var(--ink-3);
   letter-spacing: -0.005em;
   font-variant-numeric: tabular-nums;
 }

 .results-count strong {
   color: var(--ink-2);
   font-weight: 500;
 }

 .how-it-works-link {
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
   font-size: 0.75rem;
   color: var(--ink-2);
   text-decoration: none;
   font-weight: 500;
   transition: color 0.2s var(--ease);
 }

 .how-it-works-link:hover {
   color: var(--ink);
 }

 .how-it-works-link svg {
   flex-shrink: 0;
   display: block;
   color: inherit;
 }

 .results-sort {
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
   padding: 0.375rem 0.6875rem 0.375rem 0.75rem;
   background: white;
   border: 1px solid var(--border);
   border-radius: 0.75rem;
   font-family: inherit;
   font-size: 0.75rem;
   font-weight: 500;
   color: var(--ink-2);
   cursor: pointer;
   transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
 }

 .results-sort:hover {
   border-color: var(--border-2);
   color: var(--ink);
 }

 .results-sort svg {
   width: 0.6875rem;
   height: 0.6875rem;
 }

 .grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 30.5rem));
   gap: 1.375rem;
   justify-content: center;
 }

 @media (max-width: 980px) {
   .grid {
     grid-template-columns: repeat(2, minmax(0, 30.5rem));
   }
 }

 .fl-card {
   background: white;
   border-radius: 1.5rem;
   border: 1px solid #EBEBEB;
   box-shadow: 0 0.0625rem 0.03125rem rgba(24, 24, 24, 0.05);
   padding: 1.25rem;
   text-decoration: none;
   color: inherit;
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
   transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
   cursor: pointer;
   position: relative;
 }

 .fl-card:hover {
   box-shadow: 0 0.5rem 1.5rem rgba(20, 25, 40, 0.08);
   transform: translateY(-0.125rem);
 }

 .fl-head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   width: 100%;
 }

 .fl-head-left {
   display: flex;
   align-items: flex-start;
   gap: 0.625rem;
   flex: 1;
   min-width: 0;
 }

 .fl-photo {
   width: 3.25rem;
   height: 3.25rem;
   border-radius: 50%;
   overflow: hidden;
   flex-shrink: 0;
   background: #B8E0BA;
 }

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

 .fl-photo-initials {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   background-color: #B8E0BA;
   color: #262626;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 500;
   font-size: 1rem;
   text-transform: uppercase;
 }

 .fl-identity {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 0.375rem;
 }

 .fl-name-row {
   display: flex;
   align-items: center;
   gap: 0.375rem;
   margin-bottom: 0;
 }

 .fl-name {
   font-size: 1rem;
   font-weight: 500;
   color: #262626;
   line-height: 1.5rem;
 }

 .fl-id-tick {
   width: 0.875rem;
   height: 0.875rem;
   color: #181818;
   flex-shrink: 0;
 }

 .fl-claim {
   font-size: 0.8125rem;
   color: #696B6E;
   font-weight: 400;
   line-height: 1.1375rem;
   margin-bottom: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .fl-meta {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.75rem;
   color: #7B7B7B;
   font-weight: 400;
   line-height: 1rem;
 }

 .fl-meta-dot {
   width: 0.1875rem;
   height: 0.1875rem;
   border-radius: 50%;
   background: #7B7B7B;
   flex-shrink: 0;
 }

 /* Integrations */
 .fl-integrations {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   flex-shrink: 0;
 }

 .fl-integration-icon {
   width: 1rem;
   height: 1rem;
   border-radius: 0.25rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
 }

 .fl-integration-icon.notion {
   background: black;
   color: white;
 }

 .fl-integration-icon.zoom {
   background: #4087FC;
   color: white;
 }

 .fl-integration-icon.zapier {
   background: #FF4A00;
   color: white;
 }

 .fl-integration-icon svg {
   width: 0.75rem;
   height: 0.75rem;
 }

 /* Skills Tags Row */
 .fl-skills {
   display: flex;
   align-items: center;
   gap: 0.375rem;
   flex-wrap: nowrap;
   align-self: stretch;
   overflow: hidden;
   min-width: 0;
 }

 .fl-skill-tag {
   padding: 0.25rem 0.5rem;
   background: white;
   border-radius: 99.9rem;
   outline: 1px solid #EBEBEB;
   outline-offset: -1px;
   color: #5C5C5C;
   font-size: 0.75rem;
   font-weight: 500;
   line-height: 1rem;
   justify-content: center;
   align-items: center;
   display: inline-flex;
   white-space: nowrap;
   min-width: 0;
   flex-shrink: 1;
 }

 .fl-skill-tag .fl-skill-text {
   text-align: center;
   color: inherit;
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   min-width: 0;
   flex-shrink: 1;
 }

 .fl-skill-more {
   color: #5C5C5C;
   font-size: 0.875rem;
   font-weight: 400;
   text-decoration: none;
   line-height: 1.225rem;
   flex-shrink: 0;
   white-space: nowrap;
 }

 /* Portfolio Thumbs Wrapper */
 .fl-thumbs-wrapper {
   align-self: stretch;
   padding: 0.25rem;
   background: #EBEBEB;
   border-radius: 1.25rem;
   display: flex;
   flex-direction: column;
 }

 .fl-thumbs {
   display: flex;
   gap: 0.25rem;
   width: 100%;
   justify-content: center;
 }

 .fl-thumb {
   flex: 0 0 auto;
   min-width: 0;
   border-radius: 1rem;
   overflow: hidden;
   background: white;
   border: 2px solid white;
   box-shadow: 0 0.0625rem 0.125rem rgba(51, 51, 51, 0.04),
     0 0.125rem 0.25rem rgba(51, 51, 51, 0.04),
     0 0.25rem 0.5rem -0.125rem rgba(51, 51, 51, 0.06);
   position: relative;
   aspect-ratio: 10 / 11;
 }

 .fl-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.5s var(--ease);
 }

 .fl-thumb-text-placeholder {
   background: #1C1C1C;
   color: #F5F5F5;
   font-size: 0.8125rem;
   font-weight: 500;
   line-height: 1.2;
   padding: 0.875rem;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   overflow: hidden;
   word-break: break-word;
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
   text-align: left;
 }


 .fl-card:hover .fl-thumb img {
   transform: scale(1.03);
 }

 .fl-divider {
   align-self: stretch;
   height: 1px;
   background: #EBEBEB;
 }

 /* Bottom Row */
 .fl-foot {
   align-self: stretch;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.625rem;
   padding-left: 0.125rem;
 }

 .fl-foot-left {
   display: flex;
   align-items: center;
   gap: 0.625rem;
   flex: 1;
 }

 .fl-rate-info strong {
   color: #1C1C1C;
   font-size: 0.875rem;
   font-weight: 600;
   line-height: 1.25rem;
 }

 .fl-earned-info span,
 .fl-experience-info span {
   color: #5C5C5C;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
 }

 /* Availability Pill Badge */
 .fl-availability {
   padding: 0.125rem 0.375rem 0.125rem 0.25rem;
   background: white;
   box-shadow: 0 0.0625rem 0.03125rem rgba(24, 24, 24, 0.05);
   border-radius: 99.9rem;
   outline: 1px solid #D1D1D1;
   outline-offset: -1px;
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
 }

 .fl-availability .fl-avail-dot {
   width: 0.375rem;
   height: 0.375rem;
   border-radius: 50%;
   background: #A3A3A3;
   position: relative;
 }

 .fl-availability .fl-avail-text {
   font-size: 0.75rem;
   font-weight: 500;
   color: #5C5C5C;
   line-height: 1rem;
 }

 /* Availability Dot indicator outlines to match Figma spec */
 .fl-availability.is-available .fl-avail-dot {
   background: #17B26A;
   outline: 1.5px solid #D3F8E0;
 }

 .fl-availability.is-limited .fl-avail-dot {
   background: #EF6820;
   outline: 1.5px solid #FEF6EE;
 }

 .fl-availability.is-booked .fl-avail-dot {
   background: #FB3748;
   outline: 1.5px solid #FFF1F2;
 }

 .fl-tag {
   display: inline-flex;
   align-items: center;
   padding: 0.1875rem 0.5625rem;
   border-radius: 99.9rem;
   font-size: 0.65625rem;
   font-weight: 500;
   letter-spacing: -0.002em;
   line-height: 1.3;
 }

 .fl-tag-verified {
   background: white;
   border: 1px solid var(--border-2);
   color: var(--ink);
 }

 .fl-tag-verified-plus {
   background: var(--ink);
   border: 1px solid var(--ink);
   color: white;
 }

 .fl-tag-self {
   background: var(--muted-tint);
   border: 1px solid var(--border);
   color: var(--ink-2);
 }

 .cta-card {
   background: var(--ink);
   border-radius: 1.125rem;
   border: 1px solid var(--ink);
   padding: 1.75rem 1.75rem 1.625rem;
   display: flex;
   flex-direction: column;
   gap: 1rem;
   position: relative;
   overflow: hidden;
   text-decoration: none;
   color: white;
   box-shadow: rgba(20, 25, 40, 0.06) 0 0.0625rem 0.125rem, rgba(20, 25, 40, 0.1) 0 0.5rem 1.5rem;
   transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
   cursor: pointer;
 }

 .cta-card:hover {
   box-shadow: rgba(20, 25, 40, 0.1) 0 0.0625rem 0.125rem, rgba(20, 25, 40, 0.2) 0 1rem 2.25rem;
   transform: translateY(-0.125rem);
 }

 .cta-card::before {
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient(at 50% 0%, rgba(255, 255, 255, 0.08) 0%, transparent 55%);
   pointer-events: none;
 }

 .cta-card-mark {
   position: absolute;
   top: 1.5rem;
   right: 1.5rem;
   width: 1.125rem;
   height: 1.125rem;
   color: rgba(255, 255, 255, 0.2);
 }

 .cta-card-mark svg {
   width: 100%;
   height: 100%;
   display: block;
 }

 .cta-card-eyebrow {
   font-size: 0.59375rem;
   color: rgba(255, 255, 255, 0.55);
   letter-spacing: 0.18em;
   text-transform: uppercase;
   font-weight: 500;
   position: relative;
 }

 .cta-card-title {
   font-size: 1.375rem;
   font-weight: 500;
   letter-spacing: -0.026em;
   line-height: 1.18;
   color: white;
   position: relative;
 }

 .cta-card-title em {
   font-style: normal;
   color: rgba(255, 255, 255, 0.55);
 }

 .cta-card-body {
   font-size: 0.8125rem;
   color: rgba(255, 255, 255, 0.72);
   letter-spacing: -0.005em;
   line-height: 1.55;
   position: relative;
 }

 .cta-card-actions {
   position: relative;
   margin-top: auto;
   padding-top: 0.5rem;
 }

 .cta-card-btn {
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
   background: white;
   color: var(--ink);
   border-radius: 0.75rem;
   padding: 0.625rem 1rem;
   font-size: 0.78125rem;
   font-weight: 500;
   letter-spacing: -0.005em;
   transition: transform 0.25s var(--ease);
 }

 .cta-card:hover .cta-card-btn {
   transform: translateX(0.125rem);
 }

 .cta-card-btn svg {
   width: 0.6875rem;
   height: 0.6875rem;
 }

 .pagination {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.25rem;
   margin-top: 3.5rem;
   flex-wrap: wrap;
   padding: 0 1rem;
 }

 .page-btn {
   min-width: 2.25rem;
   height: 2.25rem;
   padding: 0 0.75rem;
   background: transparent;
   border: 1px solid transparent;
   border-radius: 0.75rem;
   font-family: inherit;
   font-size: 0.8125rem;
   font-weight: 500;
   color: var(--ink-2);
   letter-spacing: -0.005em;
   cursor: pointer;
   line-height: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
   font-variant-numeric: tabular-nums;
 }

 .page-btn:hover {
   background: rgba(0, 0, 0, 0.04);
   color: var(--ink);
 }

 .page-btn.is-active {
   background: white;
   border-color: var(--border-2);
   color: var(--ink);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }

 .page-btn.is-active:hover {
   background: white;
   color: var(--ink);
   border-color: var(--border-2);
 }

 .page-btn[disabled] {
   color: var(--ink-3);
   cursor: not-allowed;
   opacity: 0.4;
   background: transparent;
   border-color: transparent;
 }

 .page-btn[disabled]:hover {
   background: transparent;
   color: var(--ink-3);
   border-color: transparent;
 }

 .page-btn.page-arrow {
   padding: 0 0.6875rem;
 }

 .page-btn.page-arrow svg {
   width: 0.8125rem;
   height: 0.8125rem;
 }

 .page-btn.page-prev,
 .page-btn.page-next {
   gap: 0.5rem;
   padding: 0 1rem;
   min-width: auto;
 }

 .page-ellipsis {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 2.25rem;
   height: 2.25rem;
   color: var(--ink-3);
   font-size: 0.8125rem;
   font-weight: 500;
   letter-spacing: -0.005em;
   font-variant-numeric: tabular-nums;
 }

 .footer {
   background: var(--section-bg);
   border-top: 1px solid var(--border);
   padding: 1.5rem 0;
   position: relative;
   z-index: 10;
   clear: both;

 }

 .footer-inner {
   max-width: 75rem;
   margin: 0 auto;
   padding: 0 1.5rem;
 }

 .footer-horizontal {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   gap: 1.5rem;
   flex-wrap: wrap;
 }

 .footer-left {
   display: flex;
   align-items: center;
 }

 .footer-copyright {
   font-size: 0.75rem;
   color: var(--ink-3);
   letter-spacing: -0.003em;
   line-height: 1.5;
 }

 .footer-middle,
 .footer-right {
   display: flex;
   align-items: center;
   gap: 0.75rem;
 }

 .footer-link-sep {
   color: var(--ink-3);
   font-size: 0.75rem;
   user-select: none;
 }

 .footer-link {
   color: var(--ink-2);
   text-decoration: none;
   font-size: 0.78125rem;
   letter-spacing: -0.005em;
   line-height: 1;
   transition: color 0.2s var(--ease);
 }

 .footer-link:hover {
   color: var(--ink);
 }

 @media (max-width: 768px) {
   .footer-horizontal {
     flex-direction: column;
     align-items: center;
     gap: 1rem;
     text-align: center;
   }

   .footer-middle,
   .footer-right {
     justify-content: center;
     flex-wrap: wrap;
   }
 }

 @media (max-width: 600px) {
   .hero {
     padding: 3.5rem 1.25rem 1.25rem;
   }

   .results {
     padding: 2rem 1.25rem 3.75rem;
   }

   .nav-inner {
     padding: 0.125rem 0.625rem;
     gap: 0.25rem;
   }

   .nav-brand {
     flex: 0 0 auto !important;
   }

   .nav-brand-word {
     display: none !important;
   }

   .nav-search-wrap {
     flex: 1 !important;
     max-width: 100%;
   }

   .nav-actions {
     flex: 0 0 auto !important;
     gap: 0.375rem;
   }

   .nav-btn-outline {
     display: none !important;
   }

   .grid {
     grid-template-columns: minmax(0, 30.5rem);
     gap: 1rem;
   }

   .fl-card {
     padding: 1.5rem 1.375rem 1.375rem;
   }
 }

 .how {
   background: var(--section-bg);
   border-top: 1px solid var(--border);
   padding: 5rem 1.5rem 20rem;
   display: flow-root;
 }

 .how-inner {
   max-width: 61.25rem;
   margin: 0 auto;
 }

 .how-head {
   text-align: center;
   max-width: 33.75rem;
   margin: 0 auto 2.5rem;
 }

 .how-eyebrow {
   font-size: 0.59375rem;
   color: var(--ink-3);
   letter-spacing: 0.18em;
   text-transform: uppercase;
   font-weight: 500;
   display: block;
   margin-bottom: 1.125rem;
 }

 .how-title {
   font-size: clamp(1.75rem, 4vw, 2.5rem);
   font-weight: 500;
   letter-spacing: -0.034em;
   line-height: 1.08;
   color: var(--ink);
   margin-bottom: 0.875rem;
 }

 .how-title em {
   font-style: normal;
   color: var(--ink-3);
 }

 .how-sub {
   font-size: clamp(0.875rem, 1.4vw, 1rem);
   color: var(--ink-2);
   letter-spacing: -0.012em;
   line-height: 1.5;
 }

 .how-steps {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2rem;
 }

 .how-step {
   padding: 0 0.25rem;
 }

 .how-step-num {
   font-size: 0.65625rem;
   color: var(--ink-3);
   letter-spacing: 0.18em;
   font-variant-numeric: tabular-nums;
   font-weight: 500;
   display: block;
   margin-bottom: 0.875rem;
 }

 .how-step-title {
   font-size: 1.0625rem;
   font-weight: 500;
   letter-spacing: -0.022em;
   color: var(--ink);
   margin-bottom: 0.5rem;
   line-height: 1.3;
 }

 .how-step-desc {
   font-size: 0.84375rem;
   color: var(--ink-2);
   letter-spacing: -0.005em;
   line-height: 1.55;
 }

 @media (max-width: 720px) {
   .how {
     display: flow-root;
     padding: 3.5rem 1.25rem;
   }

   .how-head {
     margin-bottom: 2rem;
   }

   .how-steps {
     grid-template-columns: 1fr;
     gap: 1.75rem;
   }

   .how-step {
     padding: 0;
   }
 }

 .how-video-preview {
   width: 100%;
   max-width: 42.5rem;
   aspect-ratio: 16 / 9;
   border-radius: 1.25rem;
   overflow: hidden;
   position: relative;
   cursor: pointer;
   background: var(--ink);
   box-shadow: rgba(20, 25, 40, 0.04) 0 0.0625rem 0.125rem, rgba(20, 25, 40, 0.08) 0 0.75rem 2rem, rgba(20, 25, 40, 0.06) 0 2rem 4.5rem;
   margin: 0 auto;
   transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
   border-width: medium;
   border-style: none;
   border-color: currentcolor;
   border-image: initial;
   padding: 0;
   font-family: inherit;
   display: block;
 }

 .how-video-preview:hover {
   box-shadow: rgba(20, 25, 40, 0.06) 0 0.0625rem 0.125rem, rgba(20, 25, 40, 0.11) 0 1.25rem 3rem, rgba(20, 25, 40, 0.09) 0 2.5rem 6rem;
   transform: translateY(-0.125rem);
 }

 .how-video-preview img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   opacity: 0.85;
   transition: opacity 0.4s var(--ease);
 }

 .how-video-preview:hover img {
   opacity: 0.92;
 }

 .how-video-preview::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(transparent 45%, rgba(0, 0, 0, 0.28) 100%);
   pointer-events: none;
 }

 .how-play-btn {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 4rem;
   height: 4rem;
   background: rgba(255, 255, 255, 0.88);
   backdrop-filter: blur(1rem) saturate(160%);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: rgba(0, 0, 0, 0.18) 0 0.25rem 1.25rem;
   transition: transform 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
   z-index: 1;
 }

 .how-video-preview:hover .how-play-btn {
   transform: translate(-50%, -50%) scale(1.09);
   background: rgba(255, 255, 255, 0.96);
   box-shadow: rgba(0, 0, 0, 0.22) 0 0.375rem 1.75rem;
 }

 .how-play-btn svg {
   width: 1.25rem;
   height: 1.25rem;
   color: var(--ink);
   margin-left: 0.1875rem;
 }

 .how-video-duration {
   position: absolute;
   bottom: 1.125rem;
   left: 1.375rem;
   font-size: 0.6875rem;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.92);
   letter-spacing: 0.04em;
   font-variant-numeric: tabular-nums;
   z-index: 1;
 }

 .video-modal {
   position: fixed;
   inset: 0;
   z-index: 100;
   display: none;
   align-items: center;
   justify-content: center;
   padding: 1.5rem;
 }

 .video-modal.is-open {
   display: flex;
   animation: vmFadeIn 0.28s var(--ease);
 }

 .video-modal-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(10, 10, 10, 0.8);
   backdrop-filter: saturate(140%) blur(1.5rem);
   cursor: pointer;
 }

 .video-modal-inner {
   position: relative;
   width: 100%;
   max-width: 60rem;
   z-index: 1;
   animation: vmRise 0.4s var(--ease);
 }

 .video-modal-frame {
   width: 100%;
   aspect-ratio: 16 / 9;
   background: rgb(0, 0, 0);
   border-radius: 1.125rem;
   overflow: hidden;
   box-shadow: rgba(0, 0, 0, 0.5) 0 2rem 5rem;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .video-modal-placeholder {
   color: rgba(255, 255, 255, 0.45);
   font-size: 0.78125rem;
   letter-spacing: -0.005em;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.875rem;
 }

 .video-modal-placeholder svg {
   width: 2.25rem;
   height: 2.25rem;
   color: rgba(255, 255, 255, 0.28);
 }

 .video-modal-close {
   position: absolute;
   top: -2.75rem;
   right: 0;
   width: 2rem;
   height: 2rem;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 99.9rem;
   color: white;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s var(--ease);
   font-family: inherit;
 }

 .video-modal-close:hover {
   background: rgba(255, 255, 255, 0.2);
 }

 .video-modal-close svg {
   width: 0.8125rem;
   height: 0.8125rem;
 }

 @keyframes vmFadeIn {
   0% {
     opacity: 0;
   }

   100% {
     opacity: 1;
   }
 }

 @keyframes vmRise {
   0% {
     opacity: 0;
     transform: translateY(0.625rem) scale(0.988);
   }

   100% {
     opacity: 1;
     transform: translateY(0) scale(1);
   }
 }

 @media (max-width: 720px) {
   .how-play-btn {
     width: 3.25rem;
     height: 3.25rem;
   }

   .how-play-btn svg {
     width: 1rem;
     height: 1rem;
   }

   .how-video-duration {
     bottom: 0.875rem;
     left: 1rem;
     font-size: 0.65625rem;
   }

   .video-modal {
     padding: 1.25rem;
   }

   .video-modal-frame {
     border-radius: 0.875rem;
   }

   .video-modal-close {
     top: -2.5rem;
   }
 }

 @media (prefers-reduced-motion: reduce) {

   .video-modal.is-open,
   .video-modal-inner {
     animation: auto ease 0s 1 normal none running none;
   }

   .how-video-preview,
   .how-video-preview:hover,
   .how-play-btn,
   .how-video-preview:hover .how-play-btn {
     transition: none;
     transform: none;
   }
 }

 /* ═══ Footer stat separators (desktop) ═══ */
 .fl-foot-left .fl-rate-info,
 .fl-foot-left .fl-experience-info {
   position: relative;
 }

 .fl-foot-left .fl-rate-info+.fl-experience-info::before {
   content: "|";
   position: absolute;
   left: -0.4375rem;
   top: 50%;
   transform: translateY(-50%);
   color: #D1D1D1;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
 }

 /* ═══ EXTENDED MOBILE RESPONSIVENESS ═══ */

 @media (max-width: 480px) {
   .hero {
     padding: 2.5rem 1rem 1rem;
   }

   .hero-title {
     font-size: 1.75rem;
   }

   .hero-sub {
     font-size: 0.875rem;
     margin-bottom: 1.5rem;
   }

   .search-wrap {
     margin-bottom: 1.125rem;
   }

   .search-bar {
     padding: 0.125rem 1rem;
   }

   .search-input {
     font-size: 0.84375rem;
     padding: 0.625rem 0;
   }

   /* Filters — horizontal scroll on mobile */
   .filters {
     flex-wrap: nowrap;
     overflow-x: auto;
     justify-content: flex-start;
     gap: 0.375rem;
     padding: 0 1rem;
     margin-bottom: 1rem;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
   }

   .filters::-webkit-scrollbar {
     display: none;
   }

   /* Filter popovers — fixed position on mobile to prevent overflow */
   .filter-popover {
     position: fixed;
     top: auto;
     bottom: 0;
     left: 0;
     right: 0;
     border-radius: 1.125rem 1.125rem 0 0;
     min-width: 100%;
     max-height: 60vh;
     z-index: 100;
   }

   .filter-popover.is-right {
     left: 0;
     right: 0;
     min-width: 100%;
   }

   .results {
     padding: 1.5rem 1rem 3rem;
   }

   .results-head {
     margin-bottom: 1.125rem;
   }

   .fl-card {
     padding: 1.25rem 1.125rem 1.125rem;
     gap: 0.875rem;
     border-radius: 1.25rem;
   }

   .fl-photo {
     width: 2.875rem;
     height: 2.875rem;
   }

   .fl-name {
     font-size: 0.9375rem;
     line-height: 1.375rem;
   }

   .fl-id-tick {
     width: 0.75rem;
     height: 0.75rem;
   }

   .fl-claim {
     font-size: 0.75rem;
     line-height: 1rem;
   }

   .fl-meta {
     font-size: 0.6875rem;
     gap: 0.375rem;
   }

   /* Integrations — smaller on mobile */
   .fl-integrations {
     gap: 0.375rem;
   }

   .fl-integration-icon {
     width: 0.875rem;
     height: 0.875rem;
   }

   .fl-integration-icon svg {
     width: 0.625rem;
     height: 0.625rem;
   }

   /* Skills — smaller tags on mobile */
   .fl-skills {
     gap: 0.25rem;
   }

   .fl-skill-tag {
     padding: 0.1875rem 0.375rem;
     font-size: 0.6875rem;
     line-height: 0.875rem;
   }

   .fl-skill-more {
     font-size: 0.75rem;
   }

   /* Portfolio thumbs — shorter on mobile */
   .fl-thumbs-wrapper {
     padding: 0.3125rem;
     border-radius: 1rem;
   }

   .fl-thumbs {
     gap: 0.3125rem;
   }

   .fl-thumb {
     border-radius: 0.75rem;
   }

   .fl-thumb-text-placeholder {
     padding: 0.625rem;
     font-size: 0.75rem;
   }

   /* Footer stats — wrap and compact on mobile */
   .fl-foot {
     gap: 0.5rem;
     flex-wrap: wrap;
   }

   .fl-foot-left {
     gap: 0.5rem;
     flex-wrap: wrap;
   }

   .fl-rate-info strong {
     font-size: 0.8125rem;
   }

   .fl-earned-info span,
   .fl-experience-info span {
     font-size: 0.75rem;
   }

   /* Hide separators on mobile to avoid clutter */
   .fl-foot-left .fl-rate-info+.fl-experience-info::before {
     display: none;
   }

   .fl-availability {
     padding: 0.125rem 0.3125rem 0.125rem 0.1875rem;
   }

   .fl-avail-text {
     font-size: 0.6875rem;
   }

   .empty-state {
     padding: 2.5rem 1.125rem;
     border-radius: 0.875rem;
   }

   .pagination {
     margin-top: 2.25rem;
     gap: 0.1875rem;
   }

   .page-btn {
     min-width: 2rem;
     height: 2rem;
     padding: 0 0.625rem;
     font-size: 0.75rem;
   }

   .page-btn.page-prev span,
   .page-btn.page-next span {
     display: none;
   }

   .page-btn.page-prev,
   .page-btn.page-next {
     padding: 0 0.5rem;
   }

   .page-ellipsis {
     min-width: 2rem;
     height: 2rem;
     font-size: 0.75rem;
   }

   .trust-strip {
     font-size: 0.65625rem;
   }

   .trust-strip-sep {
     margin: 0 0.3125rem;
   }

   /* Footer — stack columns */
   .footer-top {
     flex-direction: column;
     gap: 1.75rem;
   }

   .footer-brand-block {
     max-width: none;
   }

   .footer-cols {
     gap: 1.5rem;
   }

   .footer-col {
     min-width: 0;
   }
 }

 @media (max-width: 360px) {
   .hero {
     padding: 2rem 0.75rem 0.75rem;
   }

   .hero-title {
     font-size: 1.5rem;
   }

   .fl-card {
     padding: 1rem 0.875rem 0.875rem;
     gap: 0.75rem;
     border-radius: 1.125rem;
   }

   .fl-head {
     gap: 0.5rem;
   }

   .fl-photo {
     width: 2.625rem;
     height: 2.625rem;
   }

   .fl-name {
     font-size: 0.875rem;
     line-height: 1.25rem;
   }

   .fl-claim {
     font-size: 0.6875rem;
   }

   .fl-meta {
     font-size: 0.625rem;
     gap: 0.25rem;
   }

   /* Hide integrations on very small screens */
   .fl-integrations {
     display: none;
   }

   .fl-skill-tag {
     padding: 0.125rem 0.3125rem;
     font-size: 0.625rem;
   }

   .fl-thumb {
     border-radius: 0.625rem;
   }

   .fl-thumb-text-placeholder {
     padding: 0.5rem;
     font-size: 0.6875rem;
   }

   .fl-thumbs-wrapper {
     padding: 0.25rem;
     border-radius: 0.875rem;
   }

   .fl-thumbs {
     gap: 0.25rem;
   }

   /* Stack footer vertically on very small screens */
   .fl-foot {
     flex-direction: column;
     align-items: flex-start;
     gap: 0.5rem;
   }

   .fl-foot-left {
     gap: 0.375rem;
   }

   .fl-rate-info strong {
     font-size: 0.75rem;
   }

   .fl-earned-info span,
   .fl-experience-info span {
     font-size: 0.6875rem;
   }
 }