/* ==========================================================================
   FairGig+ — stylesheet
   --------------------------------------------------------------------------
   Hand-written rather than pulled from the Tailwind CDN, which is what the
   original build used. The play CDN ships the whole framework plus a compiler
   to every visitor, blocks rendering while it works, and logs a console warning
   saying not to use it in production. This file is ~15KB and needs no network
   request beyond itself.

   Brand colours carried over from the HackDisrupt build so the rebuild still
   looks like the thing the judges saw.
   ========================================================================== */

:root {
  --green: #10b981;
  --green-dark: #059669;
  --green-light: #d1fae5;
  --teal: #14b8a6;
  --orange: #f97316;
  --orange-dark: #ea580c;

  --ink: #1f2937;
  --charcoal: #374151;
  --grey-600: #4b5563;
  --grey-500: #6b7280;
  --grey-400: #9ca3af;
  --grey-300: #d1d5db;
  --grey-200: #e5e7eb;
  --grey-100: #f3f4f6;
  --grey-50: #f9fafb;
  --white: #fff;

  --amber-bg: #fffbeb;
  --amber-border: #fcd34d;
  --amber-text: #92400e;
  --red: #dc2626;
  --red-bg: #fef2f2;
  --red-border: #fecaca;

  --radius: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --wrap: 1200px;
  --header-h: 64px;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Stops the sticky header covering a heading the visitor just jumped to. */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

/* Vestibular disorders make smooth scrolling and transforms genuinely
   unpleasant. Honour the OS setting rather than overriding it. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--grey-50);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

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

/**
 * The `hidden` attribute must actually hide.
 *
 * The browser default is `[hidden] { display: none }`, but that is a UA rule
 * and ANY author rule setting `display` beats it. `.btn { display: inline-flex }`
 * silently un-hid every hidden button on the page. Restating it here with
 * !important is the one place that flag is the correct tool: `hidden` is a
 * statement about the element existing at all, not a style to be negotiated.
 */
[hidden] {
  display: none !important;
}

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

h1,
h2,
h3,
h4 {
  color: var(--ink);
  line-height: 1.2;
  text-wrap: balance;
  font-weight: 700;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: -0.025em;
}
h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
}
h3 {
  font-size: 1.125rem;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--green-dark);
  text-underline-offset: 2px;
}

ul,
ol {
  padding: 0;
}

/* A visible focus ring on everything interactive. The original build removed
   outlines for looks, which makes the whole site unusable by keyboard. */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 200;
  transform: translateY(-150%);
  background: var(--white);
  color: var(--green-dark);
  padding: 10px 18px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: transform 0.2s;
}
.skip-link:focus {
  transform: translateY(0);
}

.muted {
  color: var(--grey-500);
}
.small {
  font-size: 0.875rem;
}
.tiny {
  font-size: 0.78rem;
}
.center {
  text-align: center;
}
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mt-5 { margin-top: 48px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

.prose {
  color: var(--grey-600);
  font-size: 0.975rem;
}
.prose p + p {
  margin-top: 14px;
}
.prose ul,
.prose ol {
  margin: 14px 0 14px 20px;
  padding-left: 8px;
}
.prose li + li {
  margin-top: 8px;
}
.prose strong {
  color: var(--charcoal);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s,
    box-shadow 0.18s, transform 0.12s;
  white-space: nowrap;
}
.btn:active {
  transform: translateY(1px);
}
.btn svg {
  flex-shrink: 0;
}

.btn-primary {
  background: var(--green);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--green-dark);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--white);
  color: var(--green-dark);
  border-color: var(--green);
  border-width: 2px;
}
.btn-secondary:hover {
  background: var(--green);
  color: var(--white);
}

.btn-ghost {
  background: var(--white);
  color: var(--charcoal);
  border-color: var(--grey-300);
}
.btn-ghost:hover {
  border-color: var(--grey-400);
  background: var(--grey-50);
}

.btn-white {
  background: var(--white);
  color: var(--green-dark);
  box-shadow: var(--shadow-md);
}
.btn-white:hover {
  background: var(--grey-100);
}

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border-color: rgb(255 255 255 / 0.7);
  border-width: 2px;
}
.btn-outline-white:hover {
  background: var(--white);
  color: var(--green-dark);
}

.btn-lg {
  padding: 15px 30px;
  font-size: 1rem;
}
.btn-sm {
  padding: 8px 14px;
  font-size: 0.8rem;
}
.btn-block {
  width: 100%;
}
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Cards, chips, badges
   -------------------------------------------------------------------------- */

.card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-pad {
  padding: 24px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--green-light);
  color: var(--green-dark);
  padding: 4px 11px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}
a.chip:hover {
  background: var(--green);
  color: var(--white);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.badge-smartpay {
  background: var(--orange);
  color: var(--white);
}
.badge-urgent {
  background: #fee2e2;
  color: #b91c1c;
}
.badge-featured {
  background: #fef3c7;
  color: #92400e;
}
.badge-grey {
  background: var(--grey-100);
  color: var(--grey-600);
  text-decoration: none;
}
a.badge-grey:hover {
  background: var(--grey-200);
}

/* Marks seeded placeholder content so nobody reads it as a real customer. */
.badge-demo {
  background: var(--amber-bg);
  border: 1px solid var(--amber-border);
  color: var(--amber-text);
  text-transform: uppercase;
  font-size: 0.65rem;
}

.notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border-radius: var(--radius);
  font-size: 0.875rem;
}
.notice svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.notice-amber {
  background: var(--amber-bg);
  border: 1px solid var(--amber-border);
  color: var(--amber-text);
}
.notice-green {
  background: var(--green-light);
  border: 1px solid #6ee7b7;
  color: var(--green-dark);
}
.notice-red {
  background: var(--red-bg);
  border: 1px solid var(--red-border);
  color: #991b1b;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(90deg, var(--green), var(--teal));
  box-shadow: var(--shadow-md);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.brand-name {
  color: var(--white);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.brand-plus {
  color: var(--orange);
}

.nav-links {
  display: none;
  align-items: center;
  gap: 26px;
  list-style: none;
}
.nav-links a {
  color: rgb(255 255 255 / 0.88);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 4px 0;
}
.nav-links a:hover {
  color: var(--white);
}
.nav-links a[aria-current="page"] {
  color: var(--white);
  border-bottom: 2px solid var(--orange);
}

.nav-actions {
  display: none;
  align-items: center;
  gap: 12px;
}

.currency-select {
  appearance: none;
  background: rgb(255 255 255 / 0.14);
  border: 1px solid rgb(255 255 255 / 0.3);
  color: var(--white);
  border-radius: 8px;
  padding: 6px 28px 6px 10px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 13px;
}
.currency-select:hover {
  background-color: rgb(255 255 255 / 0.24);
}
.currency-select option {
  color: var(--charcoal);
  background: var(--white);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--white);
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
}
.nav-toggle:hover {
  background: rgb(255 255 255 / 0.15);
}

.nav-mobile-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-drawer {
  background: var(--green-dark);
  border-top: 1px solid rgb(255 255 255 / 0.2);
  padding: 16px 0 20px;
}
.nav-drawer[hidden] {
  display: none;
}
.nav-drawer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-drawer a {
  display: block;
  color: rgb(255 255 255 / 0.92);
  text-decoration: none;
  padding: 11px 12px;
  border-radius: 8px;
  font-weight: 500;
}
.nav-drawer a:hover,
.nav-drawer a[aria-current="page"] {
  background: rgb(255 255 255 / 0.15);
  color: var(--white);
}
.nav-drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgb(255 255 255 / 0.2);
}

@media (min-width: 1024px) {
  .nav-links,
  .nav-actions {
    display: flex;
  }
  .nav-mobile-group {
    display: none;
  }
  .nav-drawer {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Page header + breadcrumbs
   -------------------------------------------------------------------------- */

main {
  flex: 1;
}

.page-head {
  background: var(--white);
  border-bottom: 1px solid var(--grey-200);
  padding: 32px 0;
}
.page-head-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.page-head h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}
.page-head .lede {
  color: var(--grey-600);
  margin-top: 12px;
  max-width: 62ch;
}
.eyebrow {
  color: var(--green-dark);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.page-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 900px) {
  .page-head-inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .page-head-actions {
    flex-shrink: 0;
  }
}

.crumbs {
  margin-bottom: 18px;
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  font-size: 0.83rem;
  color: var(--grey-500);
}
.crumbs li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.crumbs a {
  color: var(--grey-500);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--green-dark);
}
.crumbs [aria-current="page"] {
  color: var(--charcoal);
  font-weight: 500;
}
.crumbs svg {
  color: var(--grey-300);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  background: linear-gradient(160deg, var(--white) 0%, var(--grey-50) 45%, var(--green-light) 100%);
  padding: 48px 0 56px;
}
.hero-grid {
  display: grid;
  gap: 44px;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero {
    padding: 72px 0 80px;
  }
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }
}

.hero-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid rgb(16 185 129 / 0.35);
  color: var(--green-dark);
  padding: 7px 15px;
  border-radius: var(--radius-full);
  font-size: 0.83rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.hero h1 {
  line-height: 1.08;
}
.hero h1 .accent {
  color: var(--orange);
}
.hero-lede {
  font-size: 1.075rem;
  color: var(--grey-600);
  margin-top: 20px;
  max-width: 34em;
}

.hero-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 30px;
}
@media (min-width: 480px) {
  .hero-cta {
    flex-direction: row;
  }
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--grey-200);
}
.hero-stats .num {
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1.1;
}
.hero-stats .lbl {
  font-size: 0.85rem;
  color: var(--grey-600);
  margin-top: 2px;
}

/* Illustrative SmartPay panel */
.paypanel {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  border: 1px solid var(--grey-200);
}
.paypanel-top {
  background: linear-gradient(90deg, var(--green), var(--teal));
  color: var(--white);
  padding: 22px 24px;
}
.paypanel-top .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.paypanel-top h2 {
  color: var(--white);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.paypanel-top .state {
  background: rgb(255 255 255 / 0.22);
  padding: 4px 11px;
  border-radius: var(--radius-full);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.paypanel-top .amt {
  font-size: 1.9rem;
  font-weight: 700;
  margin-top: 4px;
}
.paypanel-top .sub {
  font-size: 0.85rem;
  opacity: 0.9;
}
.paypanel ol {
  list-style: none;
}
.paypanel li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 24px;
  border-top: 1px solid var(--grey-100);
  font-size: 0.875rem;
}
.paypanel .tick {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--grey-100);
  color: var(--grey-400);
}
.paypanel .tick.on {
  background: var(--green);
  color: var(--white);
}
.paypanel .step-label {
  flex: 1;
  font-weight: 500;
  color: var(--charcoal);
}
.paypanel .step-note {
  color: var(--grey-500);
  font-size: 0.78rem;
}
.paypanel .foot {
  padding: 11px 24px;
  background: var(--grey-50);
  border-top: 1px solid var(--grey-100);
  font-size: 0.75rem;
  color: var(--grey-500);
}

/* --------------------------------------------------------------------------
   Sections & grids
   -------------------------------------------------------------------------- */

.section {
  padding: 56px 0;
}
.section-alt {
  background: var(--white);
  border-block: 1px solid var(--grey-200);
}
.section-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}
.section-head p {
  color: var(--grey-600);
  margin-top: 6px;
  max-width: 60ch;
}
@media (min-width: 720px) {
  .section-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .section-head > .btn {
    flex-shrink: 0;
  }
}
.section-head-center {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto 40px;
}
.section-head-center p {
  margin: 14px auto 0;
}

.grid {
  display: grid;
  gap: 20px;
  list-style: none;
}
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid-2, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.icon-tile {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: var(--green-light);
  color: var(--green-dark);
  margin-bottom: 14px;
}

.feature h3 {
  margin-bottom: 8px;
}
.feature p {
  color: var(--grey-600);
  font-size: 0.9rem;
}

/* Category cards */
.cat-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.cat-card:hover {
  transform: translateY(-2px);
  border-color: var(--green);
  box-shadow: var(--shadow-md);
}
.cat-card h3 {
  font-size: 1rem;
  margin-bottom: 5px;
}
.cat-card p {
  color: var(--grey-600);
  font-size: 0.83rem;
  flex: 1;
}
.cat-card .count {
  margin-top: 12px;
  color: var(--green-dark);
  font-weight: 600;
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   Gig cards
   -------------------------------------------------------------------------- */

.giglist {
  display: grid;
  gap: 16px;
  list-style: none;
}

.gig {
  position: relative;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s;
}
.gig:hover {
  box-shadow: var(--shadow-md);
}
.gig.smartpay {
  border-left-color: var(--orange);
}

.gig-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 700px) {
  .gig-top {
    flex-direction: row;
    justify-content: space-between;
  }
}

.gig-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
}
.gig-badges a {
  position: relative;
  z-index: 2;
}

.gig h3 {
  font-size: 1.08rem;
  line-height: 1.35;
}
.gig h3 a {
  color: var(--ink);
  text-decoration: none;
}
/* Stretched link: the whole card is clickable, but the accessible name stays
   the title rather than the card's entire contents. */
.gig h3 a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.gig h3 a:hover {
  color: var(--green-dark);
}

.gig-summary {
  color: var(--grey-600);
  font-size: 0.88rem;
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gig-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  list-style: none;
}

.gig-price {
  flex-shrink: 0;
}
@media (min-width: 700px) {
  .gig-price {
    text-align: right;
    padding-left: 24px;
  }
}
.gig-price .amt {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1.15;
}
.gig-price .per {
  font-size: 0.85rem;
  color: var(--grey-500);
  font-weight: 600;
}
.gig-price .kind {
  font-size: 0.75rem;
  color: var(--grey-500);
  font-weight: 500;
}
.gig-price .range {
  font-size: 0.72rem;
  color: var(--grey-400);
  margin-top: 2px;
}

.gig-meta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--grey-100);
  font-size: 0.76rem;
  color: var(--grey-500);
  pointer-events: none;
}
.gig-meta > * {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.gig-meta .client {
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   Stars
   -------------------------------------------------------------------------- */

.stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.stars .row {
  display: inline-flex;
}
.stars .val {
  font-weight: 600;
  color: var(--charcoal);
  font-size: 0.83rem;
}
.stars .cnt {
  color: var(--grey-500);
  font-size: 0.83rem;
}
.star-on {
  color: #fbbf24;
}
.star-off {
  color: var(--grey-300);
}

/* --------------------------------------------------------------------------
   Layout: sidebar + content
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: 32px;
  align-items: start;
}
@media (min-width: 1000px) {
  .split-filters {
    grid-template-columns: 280px 1fr;
  }
  .split-aside {
    grid-template-columns: 1fr 360px;
  }
  .split-narrow-aside {
    grid-template-columns: 1fr 400px;
  }
  .sticky-col {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}

/* --------------------------------------------------------------------------
   Filters
   -------------------------------------------------------------------------- */

.filter-panel {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.filter-panel[hidden] {
  display: none;
}
.filter-group {
  padding: 16px;
  border-top: 1px solid var(--grey-100);
}
.filter-group:first-child {
  border-top: 0;
}
.filter-group legend,
.filter-group .legend {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 10px;
  padding: 0;
}
.filter-group fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
.opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--grey-600);
  cursor: pointer;
  padding: 3px 0;
}
.opt input {
  accent-color: var(--green);
  width: 16px;
  height: 16px;
  margin-top: 3px;
  flex-shrink: 0;
}
.opt-strong {
  font-weight: 600;
  color: var(--charcoal);
  display: flex;
  align-items: center;
  gap: 6px;
}
.opt-note {
  display: block;
  color: var(--grey-500);
  font-size: 0.8rem;
}

.filter-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: 0.86rem;
}
.filter-count {
  font-weight: 600;
  color: var(--charcoal);
}
.linkbtn {
  background: none;
  border: 0;
  color: var(--green-dark);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.filter-toggle {
  display: flex;
}
@media (min-width: 1000px) {
  .filter-toggle {
    display: none;
  }
  .filter-panel[hidden] {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 0.9rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field::placeholder {
  color: var(--grey-400);
}
.field:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgb(16 185 129 / 0.15);
}
.field[aria-invalid="true"] {
  border-color: var(--red);
}
textarea.field {
  resize: vertical;
  min-height: 100px;
}
select.field {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 38px;
}

.form-row {
  margin-bottom: 18px;
}
.label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 6px;
}
.req {
  color: var(--red);
}
.hint {
  font-size: 0.78rem;
  color: var(--grey-500);
  margin-bottom: 6px;
}
.err {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--red);
  font-weight: 500;
  margin-top: 6px;
}
.err[hidden] {
  display: none;
}

.prefix-wrap {
  position: relative;
}
.prefix-wrap .prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--grey-400);
  font-weight: 600;
  pointer-events: none;
}
.prefix-wrap .field {
  padding-left: 32px;
}

.form-grid-2 {
  display: grid;
  gap: 0 16px;
}
@media (min-width: 560px) {
  .form-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Honeypot: off-screen, hidden from AT. Only a script filling every input
   touches it, which is exactly what we want to catch. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.choice-grid {
  display: grid;
  gap: 12px;
}
@media (min-width: 560px) {
  .choice-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
  .choice-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
.choice {
  display: flex;
  gap: 12px;
  padding: 15px;
  border: 2px solid var(--grey-200);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.choice:hover {
  border-color: var(--grey-300);
}
.choice input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.choice:has(input:checked) {
  border-color: var(--green);
  background: var(--green-light);
}
.choice:has(input:focus-visible) {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.choice-title {
  display: block;
  font-weight: 700;
  color: var(--ink);
  font-size: 0.92rem;
}
.choice-note {
  display: block;
  font-size: 0.78rem;
  color: var(--grey-600);
}
.choice-center {
  justify-content: center;
  text-align: center;
  font-weight: 600;
  color: var(--grey-600);
}
.choice-center:has(input:checked) {
  color: var(--green-dark);
}

.pw-wrap {
  position: relative;
}
.pw-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--grey-400);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
}
.pw-toggle:hover {
  color: var(--charcoal);
}
.pw-wrap .field {
  padding-right: 42px;
}

.starpick {
  display: flex;
  gap: 4px;
}
.starpick button {
  background: none;
  border: 0;
  padding: 3px;
  cursor: pointer;
  color: var(--grey-300);
  border-radius: 6px;
  transition: transform 0.12s;
}
.starpick button:hover {
  transform: scale(1.12);
}
.starpick button[aria-checked="true"],
.starpick button.on {
  color: #fbbf24;
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.billing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.billing-toggle .lbl {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--grey-400);
}
.billing-toggle .lbl.on {
  color: var(--charcoal);
}
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.switch .track {
  position: absolute;
  inset: 0;
  background: var(--grey-300);
  border-radius: var(--radius-full);
  transition: background-color 0.2s;
  pointer-events: none;
}
.switch .knob {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 20px;
  height: 20px;
  background: var(--white);
  border-radius: 50%;
  transition: transform 0.2s;
  pointer-events: none;
}
.switch input:checked ~ .track {
  background: var(--green);
}
.switch input:checked ~ .knob {
  transform: translateX(20px);
}
.switch input:focus-visible ~ .track {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
}
.plan.featured {
  border: 2px solid var(--green);
  box-shadow: var(--shadow-lg);
}
.plan .tag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: var(--white);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}
.plan h2 {
  font-size: 1.2rem;
}
.plan .tagline {
  color: var(--grey-600);
  font-size: 0.86rem;
  margin-top: 4px;
}
.plan .price {
  margin-top: 20px;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.plan .price .per {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--grey-500);
}
.plan .billed {
  font-size: 0.76rem;
  color: var(--grey-500);
  margin-top: 4px;
  min-height: 1.2em;
}
.plan ul {
  list-style: none;
  margin: 22px 0 0;
  flex: 1;
}
.plan li {
  display: flex;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--grey-600);
  padding: 5px 0;
}
.plan li svg {
  flex-shrink: 0;
  color: var(--green);
  margin-top: 3px;
}
.plan .btn {
  margin-top: 24px;
}

/* --------------------------------------------------------------------------
   Steps / process
   -------------------------------------------------------------------------- */

.steps {
  list-style: none;
  display: grid;
  gap: 16px;
}
.step {
  display: flex;
  gap: 18px;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
}
.step-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.step-num {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--green);
  color: var(--white);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.step-line {
  width: 1px;
  flex: 1;
  background: var(--grey-200);
  margin-top: 8px;
  min-height: 12px;
}
.step .kicker {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--grey-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}
.step h3 {
  margin-bottom: 6px;
}
.step p {
  color: var(--grey-600);
  font-size: 0.88rem;
}

/* --------------------------------------------------------------------------
   Response-time promise
   -------------------------------------------------------------------------- */

.promise {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--green-light);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.promise-main {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.promise svg {
  flex-shrink: 0;
  color: var(--green-dark);
  margin-top: 2px;
}
.promise h2,
.promise .h {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.promise p {
  font-size: 0.87rem;
  color: var(--grey-600);
  margin-top: 2px;
}
.promise .pill {
  background: var(--white);
  color: var(--green-dark);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 9px 16px;
  border-radius: var(--radius);
  text-align: center;
  flex-shrink: 0;
  align-self: flex-start;
}
@media (min-width: 720px) {
  .promise {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .promise .pill {
    align-self: center;
  }
}

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */

.review {
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.review-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.review h3 {
  font-size: 1rem;
  margin-bottom: 7px;
}
.review p.body {
  color: var(--grey-600);
  font-size: 0.88rem;
  flex: 1;
}
.review .who {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--grey-100);
  font-size: 0.85rem;
}
.review .who b {
  color: var(--charcoal);
}
.review .who span {
  display: block;
  font-size: 0.78rem;
  color: var(--grey-500);
}

.rating-summary {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
@media (min-width: 620px) {
  .rating-summary {
    flex-direction: row;
    align-items: center;
  }
  .rating-big {
    border-right: 1px solid var(--grey-200);
    padding-right: 32px;
  }
}
.rating-big {
  text-align: center;
}
.rating-big .n {
  font-size: 3rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.rating-bars {
  flex: 1;
  list-style: none;
}
.rating-bars li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.83rem;
  padding: 2px 0;
}
.rating-bars .lbl {
  width: 52px;
  color: var(--grey-600);
  flex-shrink: 0;
}
.rating-bars .bar {
  flex: 1;
  height: 8px;
  background: var(--grey-100);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.rating-bars .bar i {
  display: block;
  height: 100%;
  background: #fbbf24;
  border-radius: var(--radius-full);
}
.rating-bars .n {
  width: 28px;
  text-align: right;
  color: var(--grey-500);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Case studies
   -------------------------------------------------------------------------- */

.cs {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.18s;
}
.cs:hover {
  box-shadow: var(--shadow-md);
}
.cs-top {
  background: linear-gradient(90deg, var(--green), var(--teal));
  padding: 20px;
}
.cs-top .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}
.cs-top .badges .badge:not(.badge-demo) {
  background: rgb(255 255 255 / 0.22);
  color: var(--white);
}
.cs-top h2,
.cs-top h3 {
  color: var(--white);
  font-size: 1.05rem;
  line-height: 1.35;
}
.cs-top a {
  color: var(--white);
  text-decoration: none;
}
.cs-top a::before {
  content: "";
  position: absolute;
  inset: 0;
}
.cs-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cs-body > p {
  color: var(--grey-600);
  font-size: 0.88rem;
  flex: 1;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--grey-100);
}
.metrics dd {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--green-dark);
  margin: 0;
}
.metrics dt {
  font-size: 0.72rem;
  color: var(--grey-500);
}
.cs-more {
  margin-top: 16px;
  color: var(--green-dark);
  font-weight: 600;
  font-size: 0.86rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.metrics-lg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  margin: 28px 0;
  text-align: center;
}
.metrics-lg dd {
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  font-weight: 700;
  color: var(--green-dark);
  margin: 0;
}
.metrics-lg dt {
  font-size: 0.78rem;
  color: var(--grey-500);
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq-item {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.faq-item + .faq-item {
  margin-top: 12px;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:hover {
  background: var(--grey-50);
}
.faq-item summary h3 {
  font-size: 0.97rem;
  font-weight: 600;
}
.faq-item summary svg {
  flex-shrink: 0;
  color: var(--grey-400);
  transition: transform 0.2s;
}
.faq-item[open] summary svg {
  transform: rotate(180deg);
}
.faq-answer {
  padding: 18px 20px;
  border-top: 1px solid var(--grey-100);
  color: var(--grey-600);
  font-size: 0.9rem;
}

.jumpnav {
  list-style: none;
}
.jumpnav a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--grey-600);
  text-decoration: none;
}
.jumpnav a:hover {
  background: var(--white);
  color: var(--green-dark);
}

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */

.person {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
}
.person-top {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
}
.avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--teal));
  color: var(--white);
  font-weight: 700;
  font-size: 1.1rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.person h2 {
  font-size: 1.08rem;
}
.person .role {
  color: var(--green-dark);
  font-weight: 600;
  font-size: 0.86rem;
}
.person .did {
  color: var(--grey-600);
  font-size: 0.88rem;
}
.person .headline {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--grey-100);
  font-size: 0.78rem;
  color: var(--grey-500);
  line-height: 1.55;
}

.statcard {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
}
.statcard .icon-tile {
  margin-bottom: 0;
}
.statcard .n {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
}
.statcard .l {
  font-size: 0.85rem;
  color: var(--grey-600);
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.cta-band {
  background: linear-gradient(90deg, var(--green), var(--teal));
  padding: 52px 0;
  text-align: center;
}
.cta-band h2 {
  color: var(--white);
}
.cta-band p {
  color: rgb(255 255 255 / 0.92);
  max-width: 56ch;
  margin: 14px auto 0;
}
.cta-band .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.cta-box {
  background: linear-gradient(90deg, var(--green), var(--teal));
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
}
.cta-box h2 {
  color: var(--white);
  font-size: 1.35rem;
}
.cta-box p {
  color: rgb(255 255 255 / 0.92);
  max-width: 52ch;
  margin: 10px auto 0;
  font-size: 0.92rem;
}
.cta-box .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--charcoal);
  color: var(--grey-300);
  padding: 52px 0 0;
  margin-top: auto;
}
.footer-grid {
  display: grid;
  gap: 36px;
}
@media (min-width: 700px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1040px) {
  .footer-grid {
    grid-template-columns: 1.5fr repeat(4, 1fr);
  }
}
.footer-about p {
  font-size: 0.87rem;
  color: var(--grey-400);
  max-width: 34ch;
  margin-top: 14px;
}
.footer-promise {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgb(255 255 255 / 0.06);
  padding: 12px;
  border-radius: var(--radius);
  margin-top: 18px;
  font-size: 0.85rem;
}
.footer-promise svg {
  color: var(--green);
  flex-shrink: 0;
  margin-top: 2px;
}
.footer-promise span span {
  display: block;
  font-size: 0.76rem;
  color: var(--grey-500);
}
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.footer-social a {
  background: rgb(255 255 255 / 0.1);
  padding: 8px;
  border-radius: 8px;
  color: var(--grey-300);
  display: inline-flex;
  transition: background-color 0.15s, color 0.15s;
}
.footer-social a:hover {
  background: rgb(255 255 255 / 0.2);
  color: var(--white);
}
.site-footer h2 {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.site-footer nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.site-footer nav a {
  color: var(--grey-400);
  text-decoration: none;
  font-size: 0.86rem;
}
.site-footer nav a:hover {
  color: var(--green);
}
.footer-bottom {
  margin-top: 44px;
  padding: 22px 0;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.83rem;
  color: var(--grey-500);
}
.footer-bottom a {
  color: var(--grey-400);
}
@media (min-width: 700px) {
  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   Sticky mobile CTA
   -------------------------------------------------------------------------- */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: rgb(255 255 255 / 0.97);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--grey-200);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
.sticky-cta.show {
  transform: translateY(0);
}
.sticky-cta-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
}
.sticky-cta .txt {
  flex: 1;
  min-width: 0;
}
.sticky-cta .txt b {
  display: block;
  font-size: 0.85rem;
  color: var(--charcoal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-cta .txt span {
  display: block;
  font-size: 0.74rem;
  color: var(--grey-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 1024px) {
  .sticky-cta {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Cookie / analytics consent
   -------------------------------------------------------------------------- */

.consent {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  max-width: 640px;
  margin-inline: auto;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 16px;
}
.consent[hidden] {
  display: none;
}
.consent-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.consent p {
  font-size: 0.85rem;
  color: var(--grey-600);
}
.consent .row {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
@media (min-width: 620px) {
  .consent-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   Gig detail
   -------------------------------------------------------------------------- */

.factgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  margin: 24px 0;
}
@media (min-width: 640px) {
  .factgrid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.factgrid dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--grey-500);
  font-weight: 500;
}
.factgrid dd {
  margin: 4px 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}
.factgrid dd.money {
  color: var(--green-dark);
}

.desc {
  white-space: pre-line;
  color: var(--grey-600);
  font-size: 0.95rem;
  line-height: 1.7;
}

.aside-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.aside-head {
  padding: 20px;
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-100);
}
.aside-head .k {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--grey-500);
  font-weight: 700;
}
.aside-head .name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: 8px;
}
.aside-head .headline {
  font-size: 0.86rem;
  color: var(--grey-600);
}
.aside-head .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--grey-500);
}
.aside-head .meta > * {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.aside-body {
  padding: 20px;
}
.aside-foot {
  padding: 14px 20px;
  background: #fff7ed;
  border-top: 1px solid var(--grey-100);
  font-size: 0.78rem;
  color: #7c2d12;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.aside-foot svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.minicard {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.minicard:hover {
  transform: translateY(-2px);
  border-color: var(--green);
  box-shadow: var(--shadow-md);
}
.minicard b {
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.minicard p {
  color: var(--grey-600);
  font-size: 0.79rem;
  margin-top: 6px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.minicard .amt {
  margin-top: 12px;
  font-weight: 700;
  color: var(--green-dark);
}

/* --------------------------------------------------------------------------
   Auth / dashboard
   -------------------------------------------------------------------------- */

.narrow {
  max-width: 460px;
  margin-inline: auto;
}
.auth-wrap {
  padding: 48px 0;
}
.auth-split {
  display: grid;
  gap: 40px;
  max-width: 1000px;
  margin-inline: auto;
}
@media (min-width: 960px) {
  .auth-split {
    grid-template-columns: 1fr 1.25fr;
    align-items: start;
  }
}
.benefits {
  list-style: none;
  margin-top: 26px;
}
.benefits li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--grey-600);
  padding: 5px 0;
}
.benefits svg {
  color: var(--green);
  flex-shrink: 0;
  margin-top: 3px;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  background: var(--white);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
}
th,
td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--grey-100);
  white-space: nowrap;
}
th {
  background: var(--grey-50);
  font-weight: 600;
  color: var(--charcoal);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
tbody tr:last-child td {
  border-bottom: 0;
}
.status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
}
.status-PENDING { background: var(--grey-100); color: var(--grey-600); }
.status-SHORTLISTED { background: #dbeafe; color: #1d4ed8; }
.status-ACCEPTED { background: var(--green-light); color: var(--green-dark); }
.status-REJECTED { background: #fee2e2; color: #b91c1c; }
.status-OPEN { background: var(--green-light); color: var(--green-dark); }
.status-CLOSED { background: var(--grey-100); color: var(--grey-600); }

/* --------------------------------------------------------------------------
   404 & empty states
   -------------------------------------------------------------------------- */

.big404 {
  font-size: clamp(4rem, 14vw, 7rem);
  font-weight: 700;
  color: var(--green);
  line-height: 1;
  letter-spacing: -0.04em;
}
.empty {
  text-align: center;
  padding: 56px 24px;
}
.empty .circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--grey-100);
  color: var(--grey-400);
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
}
.empty h2,
.empty h3 {
  margin-bottom: 8px;
}
.empty p {
  color: var(--grey-600);
  font-size: 0.9rem;
  max-width: 46ch;
  margin: 0 auto 22px;
}
.empty .row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.searchrow {
  display: flex;
  gap: 8px;
  max-width: 440px;
  margin: 28px auto 0;
}
.searchrow .searchfield {
  position: relative;
  flex: 1;
}
.searchrow .searchfield svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--grey-400);
  pointer-events: none;
}
.searchrow .field {
  padding-left: 40px;
}

.linkcard {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  text-decoration: none;
  height: 100%;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.linkcard:hover {
  transform: translateY(-2px);
  border-color: var(--green);
  box-shadow: var(--shadow-md);
}
.linkcard b {
  color: var(--ink);
  display: block;
}
.linkcard p {
  color: var(--grey-600);
  font-size: 0.86rem;
  margin-top: 3px;
}

.taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  justify-content: center;
}
.taglist a {
  display: inline-block;
  padding: 8px 16px;
  background: var(--white);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--charcoal);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.taglist a:hover {
  border-color: var(--green);
  color: var(--green-dark);
}

/* --------------------------------------------------------------------------
   Converter
   -------------------------------------------------------------------------- */

.converter-head {
  background: linear-gradient(90deg, var(--green), var(--teal));
  color: var(--white);
  padding: 18px 22px;
}
.converter-head h2 {
  color: var(--white);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.converter-head p {
  font-size: 0.85rem;
  opacity: 0.92;
  margin-top: 2px;
}
.rate-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin-top: 22px;
}
@media (min-width: 520px) {
  .rate-list {
    grid-template-columns: 1fr 1fr;
  }
}
.rate-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  background: var(--grey-50);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  font-size: 0.86rem;
}
.rate-list .code {
  font-weight: 500;
  color: var(--grey-600);
}
.rate-list .code em {
  font-style: normal;
  color: var(--grey-400);
  font-size: 0.78rem;
  margin-left: 5px;
}
.rate-list .v {
  font-weight: 700;
  color: var(--charcoal);
  font-variant-numeric: tabular-nums;
}
.rate-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 18px;
  font-size: 0.76rem;
  color: var(--grey-500);
}
.rate-note svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */

.legal {
  max-width: 760px;
  margin-inline: auto;
}
.legal-body {
  padding: 30px;
}
.legal section + section {
  margin-top: 34px;
}
.legal section {
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.legal h2 {
  font-size: 1.35rem;
  margin-bottom: 12px;
}
.toc {
  padding: 20px;
}
.toc h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--grey-500);
  margin-bottom: 12px;
}
.toc ul {
  display: grid;
  gap: 6px;
  list-style: none;
}
@media (min-width: 560px) {
  .toc ul {
    grid-template-columns: 1fr 1fr;
  }
}
.toc a {
  font-size: 0.86rem;
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header,
  .site-footer,
  .sticky-cta,
  .consent,
  .btn {
    display: none !important;
  }
  body {
    background: #fff;
  }
}

/* ==========================================================================
   ADDITIONS — brand split, award badge, motion, mobile
   ========================================================================== */

/* --------------------------------------------------------------------------
   FairGig+ — the paid tier, visually distinct from the platform
   --------------------------------------------------------------------------
   FairGig is the platform; FairGig+ is the subscription. They must not read as
   the same thing, so the plus mark, the orange accent and this treatment are
   reserved for the tier and never used for the platform wordmark.
   -------------------------------------------------------------------------- */

.plus-mark {
  color: var(--orange);
  font-weight: 700;
}

/* Inline "FairGig+" wherever the tier is named in prose. */
.pro-name {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.pro-name .plus-mark {
  color: var(--orange);
}

.badge-pro {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(90deg, var(--orange), #fb923c);
  color: var(--white);
  padding: 4px 11px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* The FairGig+ plan card: orange, so it reads as a different product from the
   green platform, not merely a bigger version of the free tier. */
.plan.plan-pro {
  border: 2px solid var(--orange);
  box-shadow: 0 12px 28px -12px rgb(249 115 22 / 0.4);
}
.plan.plan-pro .tag {
  background: var(--orange);
}
.plan.plan-pro li svg {
  color: var(--orange);
}
.plan.plan-pro h2 .plus-mark {
  color: var(--orange);
}
.plan.plan-pro .btn {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}
.plan.plan-pro .btn:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
}

/* Upsell strip — a compact "what the tier adds" band. */
.pro-strip {
  background: linear-gradient(120deg, #431407 0%, #7c2d12 55%, #9a3412 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.pro-strip::after {
  /* Soft highlight so the panel is not a flat rectangle. Decorative only. */
  content: "";
  position: absolute;
  top: -60%;
  right: -10%;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgb(249 115 22 / 0.35), transparent 70%);
  pointer-events: none;
}
.pro-strip > * {
  position: relative;
}
.pro-strip h2 {
  color: #fff;
  font-size: 1.35rem;
}
.pro-strip p {
  color: rgb(255 255 255 / 0.85);
  font-size: 0.92rem;
  margin-top: 8px;
  max-width: 56ch;
}
.pro-strip ul {
  list-style: none;
  display: grid;
  gap: 10px;
  margin-top: 20px;
}
@media (min-width: 620px) {
  .pro-strip ul {
    grid-template-columns: 1fr 1fr;
  }
}
.pro-strip li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 0.89rem;
  color: rgb(255 255 255 / 0.94);
}
.pro-strip li svg {
  color: var(--orange);
  flex-shrink: 0;
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   Award ribbon — 2nd place, HackDisrupt 2025
   -------------------------------------------------------------------------- */

.award {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid #fde68a;
  border-radius: var(--radius-full);
  padding: 7px 16px 7px 8px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s;
}
.award:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.award-medal {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: linear-gradient(140deg, #fde68a, #d4af37 55%, #b45309);
  color: #713f12;
  font-size: 0.72rem;
  font-weight: 800;
  box-shadow: inset 0 -1px 2px rgb(0 0 0 / 0.2);
}
.award-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.award-text b {
  font-size: 0.83rem;
  color: var(--ink);
}
.award-text span {
  font-size: 0.72rem;
  color: var(--grey-500);
}

/* Dark variant, for the footer and the team hero. */
.award-dark {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(253 230 138 / 0.35);
  box-shadow: none;
}
.award-dark .award-text b {
  color: #fff;
}
.award-dark .award-text span {
  color: rgb(255 255 255 / 0.6);
}

/* --------------------------------------------------------------------------
   Avatars — hue per person
   --------------------------------------------------------------------------
   Two team members share the initials "KM", so colour is what distinguishes
   their avatars. --avatar-hue is set inline per person.
   -------------------------------------------------------------------------- */

.avatar {
  background: linear-gradient(
    135deg,
    hsl(var(--avatar-hue, 160) 72% 42%),
    hsl(calc(var(--avatar-hue, 160) + 22) 68% 52%)
  );
}

/* --------------------------------------------------------------------------
   Motion
   --------------------------------------------------------------------------
   Everything below is additive polish. The site is fully usable with none of
   it: reveal targets start visible and are only hidden once JS confirms it can
   animate them, so a JS failure can never leave content invisible.

   The hover effects further down this file (search "Bouncy hovers") are the
   ones carried over from the original build.

   All of it is disabled under prefers-reduced-motion, at the foot of this file.
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 1;
}

/* Applied by app.js only when IntersectionObserver is available. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Cards lift a little on hover. Subtle: 2px, not a bounce. */
.gig,
.review,
.person,
.statcard,
.plan {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.18s;
}
.gig:hover,
.review:hover,
.person:hover,
.statcard:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.plan:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* Arrow nudges forward on hover — the one flourish on the primary CTA. */
.btn svg:last-child {
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn:hover svg:last-child {
  transform: translateX(3px);
}

/* Nav underline grows from the centre rather than snapping in. */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -2px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
  transition: left 0.22s ease, right 0.22s ease;
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  left: 0;
  right: 0;
}
/* The base rule uses border-bottom for the active state; the pseudo-element
   replaces it so both states animate the same way. */
.nav-links a[aria-current="page"] {
  border-bottom: 0;
}

/* Stat counters tick up when scrolled into view. Tabular figures stop the
   number jittering horizontally as the digits change. */
.hero-stats .num,
.statcard .n {
  font-variant-numeric: tabular-nums;
}

/* Escrow panel: the "paying out" row pulses gently so the illustration reads
   as in-progress rather than broken. */
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.paypanel li:last-of-type .tick {
  animation: pulse-soft 2.4s ease-in-out infinite;
}

/* Hero entrance. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.hero-grid > div:first-child > * {
  animation: rise-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-grid > div:first-child > *:nth-child(1) { animation-delay: 0.04s; }
.hero-grid > div:first-child > *:nth-child(2) { animation-delay: 0.10s; }
.hero-grid > div:first-child > *:nth-child(3) { animation-delay: 0.16s; }
.hero-grid > div:first-child > *:nth-child(4) { animation-delay: 0.22s; }
.hero-grid > div:first-child > *:nth-child(5) { animation-delay: 0.28s; }
.hero-grid > div:first-child > *:nth-child(6) { animation-delay: 0.34s; }
.hero-grid > div:last-child {
  animation: rise-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

/* Filter results fade in when the list is replaced, so a filter change reads
   as a change rather than a flicker. */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.giglist.is-updating {
  animation: fade-in 0.35s ease both;
}

/* Details/summary chevron and hover already transition; add the open reveal. */
.faq-item[open] .faq-answer {
  animation: fade-in 0.28s ease both;
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

/* Nothing may push the page sideways. A single overflowing element causes the
   whole document to scroll horizontally, which feels broken on a phone.

   This goes on <html> ONLY, never on <body> as well. Setting overflow-x on
   body computes its overflow-y to `auto`, which promotes body to its own
   scroll container — and then the page has two nested scrollers: programmatic
   scrolling stops reaching the true bottom, and position:sticky inside body
   breaks in some browsers. One line in the wrong place, several odd bugs. */
html {
  overflow-x: hidden;
}

/* Long unbroken strings — a URL in a gig description, an email address — are
   the usual culprit. */
.desc,
.prose,
.gig-summary,
.legal-body {
  overflow-wrap: break-word;
}

@media (max-width: 640px) {
  :root {
    --header-h: 58px;
  }

  .wrap {
    padding-inline: 16px;
  }

  .section {
    padding: 40px 0;
  }

  .card-pad,
  .legal-body {
    padding: 20px;
  }

  /* 44px is the minimum comfortable tap target. Buttons and form controls all
     clear it; these are the ones that did not. */
  .btn {
    min-height: 44px;
    padding: 12px 20px;
  }
  .btn-sm {
    min-height: 40px;
  }
  .field,
  select.field {
    min-height: 44px;
    /* 16px stops iOS Safari zooming the viewport when a field is focused. */
    font-size: 16px;
  }
  .opt {
    padding: 7px 0;
  }
  .opt input {
    width: 20px;
    height: 20px;
  }
  .starpick button {
    padding: 6px;
  }
  .pw-toggle {
    padding: 10px;
  }
  .nav-toggle {
    min-width: 44px;
    min-height: 44px;
  }
  .currency-select {
    min-height: 38px;
  }

  /* The sticky CTA sits over the foot of the page; give the footer room so it
     never covers the last link. */
  .site-footer {
    padding-bottom: 76px;
  }

  .hero {
    padding: 32px 0 40px;
  }
  .hero-stats {
    gap: 12px;
    margin-top: 28px;
    padding-top: 22px;
  }
  .hero-stats .num {
    font-size: 1.35rem;
  }
  .hero-stats .lbl {
    font-size: 0.75rem;
  }

  .gig {
    padding: 18px;
  }
  .gig-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .gig-price .kind {
    margin-left: auto;
  }
  .gig-meta {
    gap: 6px 12px;
  }
  .gig-meta .client {
    /* Below ~640px there is no room for the client to sit on the right, so it
       wraps onto its own line instead of squeezing the other metadata. */
    margin-left: 0;
    width: 100%;
    padding-top: 6px;
    border-top: 1px dashed var(--grey-100);
  }

  .factgrid,
  .metrics-lg {
    padding: 16px;
    gap: 12px;
  }
  .metrics-lg dd {
    font-size: 1.25rem;
  }

  .rating-big .n {
    font-size: 2.25rem;
  }

  .page-head {
    padding: 24px 0;
  }

  .faq-item summary {
    padding: 15px 16px;
  }

  .plan {
    padding: 22px;
  }

  .pro-strip {
    padding: 22px;
  }

  .award {
    padding: 6px 13px 6px 6px;
  }
  .award-text b {
    font-size: 0.78rem;
  }
}

/* Very narrow phones (iPhone SE and similar at 320px). */
@media (max-width: 380px) {
  .hero-stats {
    grid-template-columns: 1fr 1fr;
  }
  .hero-stats > div:last-child {
    grid-column: span 2;
  }
  .metrics,
  .metrics-lg {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .brand-name {
    font-size: 1.15rem;
  }
  .sticky-cta .txt {
    display: none;
  }
  .sticky-cta .btn {
    flex: 1;
  }
}

/* Tables never fit a phone; make the scroll affordance obvious rather than
   letting the content silently clip. */
@media (max-width: 720px) {
  .table-wrap {
    position: relative;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.95));
    pointer-events: none;
  }
}

/* Landscape phones: the sticky header eats too much of a 380px-tall viewport. */
@media (max-height: 460px) and (orientation: landscape) {
  .site-header {
    position: static;
  }
  .sticky-cta {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion — must stay last so it overrides everything above
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-grid > div:first-child > *,
  .hero-grid > div:last-child,
  .giglist.is-updating,
  .faq-item[open] .faq-answer,
  .paypanel li:last-of-type .tick {
    animation: none !important;
  }
  .gig:hover,
  .review:hover,
  .person:hover,
  .statcard:hover,
  .plan:hover,
  .award:hover {
    transform: none !important;
  }
  .btn:hover svg:last-child {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   Demo quick-entry (login page)
   -------------------------------------------------------------------------- */

.demo-entry {
  margin-bottom: 20px;
}
.demo-entry-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--grey-500);
  margin-bottom: 10px;
}
.demo-entry-label svg {
  color: var(--orange);
}
.demo-entry-grid {
  display: grid;
  gap: 10px;
}

.demo-btn {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--charcoal);
  transition: border-color 0.18s, background-color 0.18s, transform 0.15s,
    box-shadow 0.18s;
}
.demo-btn:hover {
  border-color: var(--green);
  background: var(--green-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.demo-btn > svg:first-child {
  color: var(--green-dark);
  flex-shrink: 0;
}
.demo-btn > span {
  flex: 1;
  min-width: 0;
}
.demo-btn-title {
  display: block;
  font-weight: 700;
  color: var(--ink);
  font-size: 0.92rem;
}
.demo-btn-note {
  display: block;
  font-size: 0.78rem;
  color: var(--grey-500);
}
.demo-btn-arrow {
  color: var(--grey-400);
  flex-shrink: 0;
  transition: transform 0.2s, color 0.18s;
}
.demo-btn:hover .demo-btn-arrow {
  transform: translateX(3px);
  color: var(--green-dark);
}

/* "or sign in" divider */
.or-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 20px;
  color: var(--grey-400);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.or-rule::before,
.or-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--grey-200);
}

/* --------------------------------------------------------------------------
   Hero badge row — escrow flag beside the award ribbon
   -------------------------------------------------------------------------- */

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.hero-badges .hero-flag {
  margin-bottom: 0;
}

@media (max-width: 480px) {
  .hero-badges {
    gap: 8px;
  }
  .hero-badges .hero-flag {
    font-size: 0.78rem;
    padding: 6px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-btn:hover {
    transform: none !important;
  }
  .demo-btn:hover .demo-btn-arrow {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile fixes found by tools/check-mobile.mjs
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  /* Primary controls to a comfortable 44px. The logo link and the currency
     picker were both 36–38px, which is a miss on a touch screen. */
  .brand {
    min-height: 44px;
  }
  .nav-login {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* 16px on the select is not a style choice: below 16px, iOS Safari zooms
     the whole viewport when the control receives focus, and does not zoom
     back out. Showing the bare code keeps it compact at that size. */
  .currency-select {
    font-size: 16px;
    min-height: 44px;
    padding: 8px 26px 8px 10px;
  }

  /* Nothing below 12px: badges, metric labels and the medal all sat at
     11.2–11.5px, which is below a sensible legibility floor on a phone. */
  .badge,
  .badge-demo,
  .badge-pro,
  .tiny,
  .award-medal,
  .factgrid dt,
  .metrics dt,
  .gig-meta,
  .cs-more,
  .rate-note,
  .plan .billed {
    font-size: 0.75rem;
  }
  .eyebrow,
  .site-footer h2,
  .aside-head .k {
    font-size: 0.75rem;
  }
  .gig-price .kind,
  .gig-price .range,
  .review .who span,
  .person .headline,
  .demo-btn-note,
  .opt-note {
    font-size: 0.78rem;
  }

  /* Inline badges are legitimately small targets — WCAG 2.2 AA (2.5.8) sets
     the floor at 24x24, and 44x44 is the AAA guideline for primary controls.
     Give them the 24px minimum with breathing room between them. */
  .badge,
  .chip {
    min-height: 26px;
    padding-block: 5px;
  }
  .gig-badges,
  .gig-skills {
    gap: 8px;
  }
}

/**
 * Room for the sticky call-to-action.
 *
 * The bar is fixed, so it floats over whatever is at the foot of the page —
 * on a phone that was the footer's navigation links, which became unreachable.
 * app.js sets --sticky-cta-h to the bar's measured height while it is showing,
 * and this reserves exactly that much space. Measuring rather than hardcoding
 * means it stays correct if the bar's contents ever change.
 */
body {
  padding-bottom: var(--sticky-cta-h, 0px);
  transition: padding-bottom 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}

@media (max-width: 640px) {
  /* Star picker: 28px glyph + 6px padding came to 40px. */
  .starpick button {
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* The billing switch is 48x28. The visible track stays that size — a 44px
     tall switch looks wrong — but the label around it grows to a 44px tap
     area, which is the target that actually receives the touch. */
  .billing-toggle .switch {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .billing-toggle .switch .track {
    top: 8px;
    bottom: 8px;
  }
  .billing-toggle .switch .knob {
    top: 12px;
  }

  /* Checkbox and radio rows: the label is the tap target, so give it the
     height rather than inflating the box itself to an ungainly 44px. */
  .opt {
    min-height: 44px;
    align-items: center;
  }
  .opt input {
    width: 22px;
    height: 22px;
    margin-top: 0;
  }
  .filter-group .opt {
    min-height: 40px;
  }

  /* Last of the sub-12px text. */
  .award-text span,
  .paypanel .step-note,
  .paypanel-top .state,
  .footer-promise span span,
  .review .who span,
  .step .kicker,
  .toc h2 {
    font-size: 0.75rem;
  }
}

@media (max-width: 640px) {
  .pw-toggle {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .sticky-cta .txt span {
    font-size: 0.75rem;
  }
}

@media (max-width: 640px) {
  .plan .tag,
  .status {
    font-size: 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   Real overflow fixes
   --------------------------------------------------------------------------
   These were previously masked by `overflow-x: hidden` on <body>. Hiding
   overflow does not remove it — it just stops you seeing that a 414px button
   is sitting inside a 320px screen, clipped. Fixing the causes instead.
   -------------------------------------------------------------------------- */

/* Grid and flex children default to min-width:auto, which refuses to shrink
   below their content. That is what let a wide table push the dashboard's
   whole column past the viewport instead of scrolling inside its own wrapper. */
.grid > *,
.split > *,
.giglist > *,
.hero-grid > * {
  min-width: 0;
}

/* Buttons no longer refuse to wrap. `nowrap` is right for short labels and
   wrong for "Read the full process, including disputes", which was 414px wide
   on a 320px screen. */
.btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}

/* Long single words (a URL in a gig brief) can still exceed their container. */
.card,
.gig,
.review,
.person,
.plan,
.minicard,
.linkcard {
  overflow-wrap: break-word;
}

.sticky-cta-inner {
  min-width: 0;
}
.sticky-cta .txt {
  min-width: 0;
}
.sticky-cta .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 400px) {
  /* At the narrowest widths the bar keeps one action, not two. */
  .sticky-cta .btn-secondary {
    display: none;
  }
}

/* The table scrolls inside its wrapper; the wrapper must not itself grow. */
.table-wrap {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Fixes found by looking at the rendered page
   -------------------------------------------------------------------------- */

/* .btn-accent was used on the FairGig+ panel but never defined, so that button
   rendered with no background at all. */
.btn-accent {
  background: var(--orange);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-accent:hover {
  background: var(--orange-dark);
  box-shadow: var(--shadow-md);
}

/* .pro-name hardcoded --ink, which is near-black — invisible on the dark
   FairGig+ panel. Inheriting lets it take the colour of wherever it sits. */
.pro-name {
  color: inherit;
}

/* On the dark panel the plus needs a lighter orange to clear contrast against
   the brown; the default --orange is too close to the background. */
.pro-strip .pro-name {
  color: #fff;
}
.pro-strip .plus-mark {
  color: #fdba74;
}
.pro-strip .btn-outline-white:hover {
  color: #7c2d12;
}

/* The award medal holds a decorative star, not the text "2nd" — repeating the
   placing next to a heading that already says "2nd place" read as a typo once
   the markup was flattened to plain text. */
.award-medal svg {
  width: 15px;
  height: 15px;
}

/* ==========================================================================
   Bouncy hovers — carried over from the original HackDisrupt build
   --------------------------------------------------------------------------
   The original used Tailwind's `hover:-translate-y-1 transition-all` on
   buttons and cards, and `rotate-3 hover:rotate-0` on the SmartPay panel.
   Those are the bits that gave the site its liveliness, so they are back —
   with a spring curve rather than a linear ease, which is what makes the
   movement read as a bounce instead of a slide.

   --spring overshoots slightly past its destination and settles. Kept short
   (0.28s) and small (3–4px) so it stays lively without becoming a toy.
   ========================================================================== */

:root {
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-soft: cubic-bezier(0.22, 1.2, 0.36, 1);
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.24s var(--spring-soft),
    transform 0.28s var(--spring);
}
.btn:hover {
  transform: translateY(-3px);
}
.btn:active {
  /* Snaps back down on press — the click should feel like it lands. */
  transform: translateY(0);
  transition-duration: 0.06s;
}

.btn-primary:hover,
.btn-accent:hover {
  box-shadow: 0 8px 18px -6px rgb(16 185 129 / 0.55);
}
.btn-accent:hover {
  box-shadow: 0 8px 18px -6px rgb(249 115 22 / 0.55);
}
.btn-white:hover,
.btn-outline-white:hover {
  box-shadow: 0 8px 18px -6px rgb(0 0 0 / 0.25);
}

/* --- Cards --------------------------------------------------------------- */

.gig,
.review,
.person,
.statcard,
.cat-card,
.linkcard,
.minicard,
.cs,
.demo-btn,
.award {
  transition:
    transform 0.3s var(--spring),
    box-shadow 0.3s var(--spring-soft),
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.gig:hover,
.review:hover,
.person:hover,
.statcard:hover,
.cs:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.cat-card:hover,
.linkcard:hover,
.minicard:hover,
.demo-btn:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.award:hover {
  transform: translateY(-2px) scale(1.015);
}

.plan {
  transition:
    transform 0.32s var(--spring),
    box-shadow 0.32s var(--spring-soft);
}
.plan:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

/* --- The SmartPay panel -------------------------------------------------- */

/* The original sat at rotate(3deg) and straightened on hover. Toned to 2deg —
   enough to look deliberately placed rather than accidentally crooked. */
@media (min-width: 1024px) {
  .paypanel {
    transform: rotate(2deg);
    transition: transform 0.45s var(--spring-soft), box-shadow 0.45s ease;
  }
  .paypanel:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: 0 28px 45px -18px rgb(0 0 0 / 0.28);
  }
}

/* --- Small flourishes ---------------------------------------------------- */

.chip {
  transition: transform 0.2s var(--spring), background-color 0.18s ease,
    color 0.18s ease;
}
a.chip:hover {
  transform: translateY(-2px);
}

.badge-smartpay {
  transition: transform 0.2s var(--spring);
}
.gig:hover .badge-smartpay {
  transform: scale(1.06);
}

.icon-tile {
  transition: transform 0.3s var(--spring), background-color 0.2s ease,
    color 0.2s ease;
}
.cat-card:hover .icon-tile,
.statcard:hover .icon-tile {
  transform: scale(1.08) rotate(-4deg);
}
.cat-card:hover .icon-tile {
  background: var(--green);
  color: var(--white);
}

.brand {
  transition: transform 0.28s var(--spring);
}
.brand:hover {
  transform: scale(1.03);
}

.taglist a,
.jumpnav a {
  transition: transform 0.2s var(--spring), border-color 0.18s ease,
    color 0.18s ease, background-color 0.18s ease;
}
.taglist a:hover {
  transform: translateY(-2px);
}

.footer-social a {
  transition: transform 0.25s var(--spring), background-color 0.18s ease,
    color 0.18s ease;
}
.footer-social a:hover {
  transform: translateY(-3px);
}

.starpick button {
  transition: transform 0.22s var(--spring), color 0.15s ease;
}
.starpick button:hover {
  transform: scale(1.18);
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .btn,
  .gig,
  .review,
  .person,
  .statcard,
  .cat-card,
  .linkcard,
  .minicard,
  .cs,
  .demo-btn,
  .award,
  .plan,
  .paypanel,
  .chip,
  .badge-smartpay,
  .icon-tile,
  .brand,
  .taglist a,
  .footer-social a,
  .starpick button {
    transition: background-color 0.18s ease, color 0.18s ease,
      border-color 0.18s ease !important;
  }
  .btn:hover,
  .gig:hover,
  .review:hover,
  .person:hover,
  .statcard:hover,
  .cat-card:hover,
  .linkcard:hover,
  .minicard:hover,
  .cs:hover,
  .demo-btn:hover,
  .award:hover,
  .plan:hover,
  .paypanel,
  .paypanel:hover,
  a.chip:hover,
  .gig:hover .badge-smartpay,
  .cat-card:hover .icon-tile,
  .statcard:hover .icon-tile,
  .brand:hover,
  .taglist a:hover,
  .footer-social a:hover,
  .starpick button:hover {
    transform: none !important;
  }
}