@import url('https://fonts.googleapis.com/css2?family=General+Sans:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* Dark, purple-accented theme (original GuestPostOn-style palette: near-
   black background, violet/purple gradient accents restored per Adam's
   call — the chartreuse/near-black swap from the Compound Search brief
   pass is reverted here, colors only. Typography (General Sans/JetBrains
   Mono) and the sharper --radius values from that pass are kept, since
   only the theme color was called out for reverting. */
:root {
  --paper: #0b0a12;
  --card: #15131f;
  --card-hover: #1b1829;
  --ink: #f4f2fa;
  --ink-soft: #b9b4c9;
  --ink-faint: #7c7791;
  --line: #262236;
  --line-strong: #342f47;
  --verified: #2dd4bf;
  --verified-bg: rgba(45, 212, 191, 0.12);
  --gold: #e0b64c;
  --gold-bg: rgba(224, 182, 76, 0.12);
  --danger: #f87171;

  --accent-1: #0d9488;
  --accent-2: #14b8a6;
  --accent-3: #2dd4bf;
  --accent-gradient: linear-gradient(135deg, var(--accent-1), var(--accent-2), var(--accent-3));

  /* Original theme's accent-gradient (teal → cyan) is dark/saturated
     enough for white text on top, unlike chartreuse — so
     --accent-foreground goes back to white instead of the near-black
     value the chartreuse pass needed. Token kept (rather than reverting
     every call site back to a hardcoded #fff) so future accent-color
     changes only need to touch this one line again. */
  --accent-foreground: #ffffff;

  --header-bg: rgba(11, 10, 18, 0.85);
  --hero-wash: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(45, 212, 191, 0.16), transparent 70%);

  --radius: 10px;
  --radius-sm: 6px;
  --radius-pill: 999px;

  --font-general-sans: 'General Sans';
  --font-jetbrains-mono: 'JetBrains Mono';
  --font-display: var(--font-general-sans), Satoshi, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: var(--font-general-sans), Satoshi, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: var(--font-jetbrains-mono), ui-monospace, 'SF Mono', Menlo, monospace;

  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.4rem;
  --space-4: 2.2rem;
  --space-5: 3.6rem;
  --space-6: 5.6rem;

  color-scheme: dark;
}

/* Original light theme values — same structure as dark, teal deepened
   for contrast against a near-white page. Doesn't redefine --accent-1/2/3
   or --accent-gradient, matching the original file: light mode reuses
   the dark theme's teal/cyan gradient as-is. */
:root[data-theme='light'] {
  --paper: #faf9fc;
  --card: #ffffff;
  --card-hover: #f3f1f8;
  --ink: #1a1626;
  --ink-soft: #4a4459;
  --ink-faint: #6f6786;
  --line: #e3dff0;
  --line-strong: #cec7e3;
  --verified: #0d9488;
  --verified-bg: rgba(13, 148, 136, 0.1);
  --gold: #b8862f;
  --gold-bg: rgba(184, 134, 47, 0.1);
  --danger: #dc2626;

  --header-bg: rgba(250, 249, 252, 0.85);
  --hero-wash: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(13, 148, 136, 0.08), transparent 70%);

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.1;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; margin-top: var(--space-5); }
h3 { font-size: 1.2rem; font-weight: 700; }

p { margin: 0 0 var(--space-2); color: var(--ink-soft); }

a {
  color: var(--verified);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--ink); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--verified);
  outline-offset: 2px;
}

/* WCAG 2.4.1 Bypass Blocks: lets keyboard/screen-reader users skip the
   header's logo + 7 nav links + saved/theme/login/submit buttons and jump
   straight to page content, instead of tabbing through all of it on every
   single page load. Off-screen until it receives keyboard focus (tabbing
   from the very top of the page), then snaps into view. */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-3);
  z-index: 100;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.6em 1.2em;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: var(--space-2);
}

/* ---------- Browse nav dropdown ---------- */

.browse-dropdown__trigger {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0;
}

.browse-dropdown__menu {
  position: absolute;
  top: calc(100% + 0.6em);
  left: 50%;
  transform: translateX(-50%);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.4em;
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 30;
}

.browse-dropdown__item {
  display: block;
  padding: 0.5em 0.8em;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
}
.browse-dropdown__item:hover {
  background: var(--card-hover);
  color: var(--ink);
}

button {
  font-family: var(--font-body);
  cursor: pointer;
}

/* ---------- Site chrome ---------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
  transition: border-color 0.2s ease;
}

/* Per the brief: the header's bottom border picks up the accent color
   once the page has scrolled past the hero, rather than showing it at
   rest — .site-header--scrolled is toggled by a small script in
   layout.blade.php. Plain --line border at the top of the page keeps
   the header quiet until there's something to distinguish it from. */
.site-header--scrolled {
  border-bottom-color: var(--verified);
}

.site-header__inner {
  max-width: 100%;
  margin: 0 auto;
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.site-wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.site-wordmark:hover { color: var(--ink); }
.site-wordmark__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 0.5em;
  border-radius: var(--radius-sm);
  background: var(--accent-gradient);
  flex-shrink: 0;
}
.site-wordmark__icon svg {
  width: 18px;
  height: 18px;
}
.site-wordmark__logo-img {
  height: 30px;
  width: auto;
  display: block;
}
.site-wordmark__mark {
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-left: 0.2em;
}

/* Nav container — was a fully rounded pill (--radius-pill), tightened to
   --radius per the "sharp accent" direction: a data-forward nav reads as
   a bar of items, not a bubble. Links inside use --radius-sm so the
   hover state doesn't look like a mismatched rounder shape sitting
   inside a squarer one. */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.3em;
}
.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.5em 1em;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background 0.15s ease;
}
.site-nav a:hover {
  color: var(--ink);
  background: var(--card-hover);
}
/* In-page section switcher for company/freelancer/author profiles (Home,
   About, Services, Blog…). Was reusing .site-nav wholesale, which gave it
   the exact same pill/card treatment as the primary header nav sitting
   directly above it — two visually identical bars stacked with nothing to
   tell them apart. Underline tabs read as "you are here, in this page's
   sections" instead of a second global nav. */
.section-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-4);
}
.section-tabs a {
  display: inline-block;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.7em 0.1em;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.section-tabs a:hover { color: var(--ink); }
.section-tabs a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--verified);
}

.site-nav span {
  color: var(--ink-soft);
  padding: 0.5em 0.6em;
  font-size: 0.85rem;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* When the nav has too many items to fit on one line with this group,
     flex-wrap drops it to its own line — and justify-content: space-between
     has nothing to space a lone wrapped item against, so it snaps to the
     far left instead of staying under the nav on the right. margin-left:
     auto forces it to the right edge of whichever line it's on, wrapped
     or not. */
  margin-left: auto;
}
.site-header__login {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.site-header__login:hover { color: var(--ink); }
.site-header__user {
  font-size: 0.85rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.site-header__cta {
  padding: 0.55em 1.3em;
  font-size: 0.85rem;
  white-space: nowrap;
}

.site-main {
  max-width: 100%;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
}

/* ---------- Eyebrow / labels ---------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.25em 0.75em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--card);
}
a.tag:hover { border-color: var(--verified); color: var(--verified); }

/* ---------- Page hero: gradient heading + badge row + stat cards ----------
   Matches the GuestPostOn-style reference's "Browse Categories" hero: a
   row of small pill badges above a large gradient-text headline, followed
   by a strip of stat cards. Built as standalone classes so any listing/
   hero page (home, blog, directory, future marketplace pages) can opt in
   without duplicating the gradient/badge markup per page. */

.page-hero {
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-3);
  margin-left: calc(var(--space-3) * -1);
  margin-right: calc(var(--space-3) * -1);
  background: var(--hero-wash);
  border-radius: var(--radius);
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.35em 0.9em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge-pill--verified {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.28);
}

.badge-pill--accent {
  color: var(--accent-1);
  background: rgba(45, 212, 191, 0.12);
  border-color: rgba(45, 212, 191, 0.28);
}

.gradient-heading {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-top: 0;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.stat-card__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: 0.4em;
}

.stat-card__value {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat-card__value--accent { color: var(--accent-1); }

.site-footer {
  border-top: 1px solid var(--line-strong);
  margin-top: var(--space-6);
  padding: var(--space-5) 0 var(--space-3);
}
.site-footer__inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(120px, 1fr));
  gap: var(--space-4);
  padding-bottom: var(--space-4);
}
.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: var(--space-2);
}
.site-footer__tagline {
  font-size: 0.85rem;
  color: var(--ink-faint);
  max-width: 34ch;
  margin-bottom: var(--space-2);
}
.site-footer__col h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 0 0 var(--space-2);
  font-weight: 500;
}
.site-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6em;
}
.site-footer__col a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.88rem;
}
.site-footer__col a:hover { color: var(--verified); }

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.site-footer__links {
  display: flex;
  gap: var(--space-3);
}
.site-footer__links a {
  color: var(--ink-soft);
  text-decoration: none;
}
.site-footer__links a:hover {
  color: var(--verified);
}
@media (max-width: 760px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .site-footer__grid > div:first-child { grid-column: 1 / -1; }
  .site-footer__col { min-width: 0; }
}
@media (max-width: 420px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__grid > div:first-child { grid-column: auto; }
}

.tag__icon {
  width: 1em;
  height: 1em;
  object-fit: cover;
  margin-right: 0.4em;
  vertical-align: -0.15em;
}

/* ---------- Verified stamp (signature element) ---------- */

.verified-stamp {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border: 2px solid var(--verified);
  border-radius: 50%;
  transform: rotate(-11deg);
  color: var(--verified);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 1.15;
  background: rgba(47, 111, 78, 0.04);
  animation: stamp-in 0.4s ease-out;
  pointer-events: none;
}
.verified-stamp::before,
.verified-stamp::after {
  content: '';
  position: absolute;
  border: 1px solid var(--verified);
  border-radius: 50%;
  opacity: 0.5;
}
.verified-stamp::before { inset: -5px; }
.verified-stamp::after { inset: 4px; }

@keyframes stamp-in {
  from { transform: rotate(-11deg) scale(1.4); opacity: 0; }
  to { transform: rotate(-11deg) scale(1); opacity: 1; }
}

.verified-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--verified);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.verified-inline::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verified);
  display: inline-block;
}

/* ---------- Cards / listing grid ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.listing-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.listing-card:hover {
  transform: translateY(-3px) scale(1.01);
  border-color: var(--verified);
  box-shadow: 0 12px 28px rgba(45, 212, 191, 0.18);
}

.listing-card__logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  margin-bottom: var(--space-2);
}

/* Portfolio/project thumbnail inside a .listing-card — was borrowing
   .detail-header__cover (the profile page's banner image class), so when
   that got a 16:5 aspect-ratio for the wide company banner, every
   freelancer portfolio-project thumbnail (often a square app screenshot
   or a tall mobile shot) got forced into the same wide letterbox shape.
   Separate class, standard 16:9, so the two aren't coupled. */
.listing-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.listing-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.listing-card h3 { margin-bottom: 0.2em; color: var(--ink); }
.listing-card__link:hover h3 { color: var(--verified); }

.listing-card__meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-bottom: var(--space-2);
}

/* ---------- Submit page: hero feature cards + how-it-works/gate layout ---------- */

.submit-page-hero {
  max-width: 760px;
  margin: 0 auto var(--space-4);
  text-align: center;
}
.submit-page-hero h1 {
  margin-bottom: .25em;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.submit-page-hero p { margin: 0; font-size: 1rem; }

.feature-card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2);
  max-width: 1180px;
  margin: 0 auto var(--space-4);
}
.feature-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  text-align: center;
}
.feature-card__icon {
  width: 38px;
  height: 38px;
  margin: 0 auto var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--verified-bg);
  font-size: 1.3rem;
}
.feature-card h3 { margin-bottom: 0.2em; font-size: 1rem; }
.feature-card p { font-size: 0.88rem; margin: 0; }

.submit-gate-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 920px);
  gap: var(--space-4);
  align-items: start;
  justify-content: center;
  max-width: 1220px;
  margin: 0 auto;
}
.submit-guide { position: sticky; top: 96px; }
.submit-form-card { padding: clamp(1rem, 2.5vw, 2rem); }
.submit-form { display: grid; gap: var(--space-3); }
.submit-section {
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.submit-section--accent { border-color: var(--verified); }
.submit-section__heading {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}
.submit-section__heading > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--verified);
  background: var(--verified-bg);
  font-family: var(--font-mono);
}
.submit-section__heading h2 { margin: 0; font-size: 1.1rem; }
.submit-section__heading p { margin: .2rem 0 0; font-size: .88rem; }
.agency-destination {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  border: 1px solid var(--verified);
  border-radius: var(--radius-sm);
  background: var(--verified-bg);
}
.agency-destination__icon { color: var(--verified); font-size: 1.25rem; font-weight: 700; }
.agency-destination span { color: var(--ink-soft); font-size: .88rem; }
.agency-listing-type {
  display: grid;
  gap: .25rem;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.agency-listing-type strong { font-size: 1.05rem; }
.agency-listing-type > span:last-child { color: var(--ink-soft); font-size: .88rem; }
.submit-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  backdrop-filter: blur(12px);
}
.submit-form-actions span { color: var(--ink-soft); font-size: .85rem; }
.submit-form-actions .submit-btn { flex: 0 0 auto; }
@media (max-width: 780px) {
  .submit-gate-layout {
    grid-template-columns: 1fr;
  }
  .submit-guide { position: static; }
  .feature-card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .submit-form-actions { position: static; align-items: stretch; flex-direction: column; }
  .submit-form-actions .submit-btn { width: 100%; }
}
@media (max-width: 480px) {
  .feature-card-row { grid-template-columns: 1fr; }
}

.how-it-works {
  list-style: none;
  margin: var(--space-2) 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.how-it-works li {
  display: flex;
  align-items: center;
  gap: 0.7em;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.how-it-works__number {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--verified-bg);
  color: var(--verified);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-gate__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--verified-bg);
  color: var(--verified);
  font-size: 1.4rem;
}

/* ---------- Homepage two-column layout (category sidebar) ---------- */

.home-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 860px) {
  .home-layout {
    grid-template-columns: 1fr;
  }
}

.home-sidebar {
  position: sticky;
  top: calc(64px + var(--space-3));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
}
@media (max-width: 860px) {
  .home-sidebar {
    position: static;
  }
}

.home-sidebar__title {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
}

.category-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  max-height: 70vh;
  overflow-y: auto;
}

.category-sidebar-list__link {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 0.7em;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9rem;
}
.category-sidebar-list__link:hover {
  background: var(--card-hover);
  color: var(--ink);
}

/* ---------- Category pill row ---------- */

.category-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}

/* ---------- Empty states ---------- */

.empty-state {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: var(--space-3);
  color: var(--ink-soft);
  background: var(--card);
}

/* ---------- Company / person detail page ---------- */

/* .site-main has no max-width (see .article-page comment below) — fine
   for grids, but it was leaving the profile page's cover photo, intro
   paragraph, and quote/review columns to stretch to the full viewport
   width on wide screens: an absurdly wide/short banner, edge-to-edge
   paragraph lines, and two form columns with a lot of dead space between
   them. Every company/freelancer/author detail page wraps its <article>
   in this to read like a page instead of a stretched fragment. */
.detail-page {
  max-width: 980px;
  margin: 0 auto;
}

/* The checkout agreement stays comfortably narrow at normal browser
   zoom, but uses more of an ultra-wide viewport. A 50% browser zoom
   reports roughly twice the CSS viewport width, so the wider breakpoint
   prevents the entire legal flow from shrinking into a tiny card in the
   middle of a large monitor. */
.subscription-agreement-page {
  width: min(100%, 920px);
}

.subscription-agreement-copy {
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  color: var(--ink-soft);
  scrollbar-gutter: stable;
}

@media (min-width: 1800px) {
  .subscription-agreement-page {
    width: min(88vw, 1320px);
    max-width: 1320px;
  }

  .subscription-agreement-copy {
    max-height: 480px;
    padding: var(--space-4);
    font-size: 1.05rem;
    line-height: 1.75;
  }

  .subscription-agreement-page > h1 {
    font-size: clamp(2.75rem, 2.2vw, 4rem);
  }
}

@media (max-width: 640px) {
  .subscription-agreement-page {
    width: 100%;
  }

  .subscription-agreement-copy {
    max-height: none;
    overflow: visible;
  }
}

/* ---------- Docs-style page with a quick-links sidebar ---------- */
/* Used by pages like /how-it-works: a handful of named sections a reader
   likely wants to jump between rather than read linearly top-to-bottom.
   Sidebar is sticky so it stays reachable while scrolling a long page,
   and highlights whichever section is currently in view (see the
   IntersectionObserver script wherever this is used) so it also works
   as a "you are here" indicator, not just a jump-list. Collapses to a
   single column with the sidebar first on narrow screens, since sticky
   positioning alongside a narrow content column doesn't work well on
   mobile widths anyway. */
.docs-layout {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 820px) {
  .docs-layout {
    grid-template-columns: 1fr;
  }
}
.docs-sidebar {
  position: sticky;
  top: var(--space-3);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.docs-sidebar__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 0 0 var(--space-2);
}
.docs-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.3em;
}
.docs-sidebar a {
  display: block;
  padding: 0.5em 0.7em;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9rem;
  border-left: 2px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.docs-sidebar a:hover {
  color: var(--ink);
  background: var(--paper);
}
.docs-sidebar a.is-active {
  color: var(--verified);
  border-left-color: var(--verified);
  background: var(--verified-bg);
  font-weight: 500;
}
.docs-section {
  scroll-margin-top: var(--space-3);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.docs-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ---------- Insights/Blog index: sidebars either side of a card grid --- */
/* Same sticky-sidebar idea as .docs-layout, but three columns instead of
   two — quick links/browse-by-category on the left, a lighter
   complementary widget (CTA, etc.) on the right, article cards in the
   middle. Collapses to a single column (sidebars first, in source order)
   below 1000px — three columns next to a card grid needs real width to
   not feel cramped. */
.insights-layout {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 1fr 260px;
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 1000px) {
  .insights-layout {
    grid-template-columns: 1fr;
  }
}
.sidebar-card {
  position: sticky;
  top: var(--space-3);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.sidebar-card + .sidebar-card {
  margin-top: var(--space-3);
}
.sidebar-card__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 0 0 var(--space-2);
}
.sidebar-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.3em;
}
.sidebar-card a {
  display: block;
  padding: 0.5em 0.7em;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-card a:hover {
  color: var(--verified);
  background: var(--paper);
}
.sidebar-card--cta {
  text-align: center;
  background: var(--paper);
  border-color: var(--verified);
}
.sidebar-card--cta h4 {
  margin: 0 0 0.4em;
  font-size: 1.05rem;
}
.sidebar-card--cta p {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0 0 var(--space-2);
}

/* ---------- Signup: form + a live instructional step panel ------------ */
/* Clickable path-choice cards on signup step 1 — a real <button>
   styled as a card, not a link, since choosing a path is a client-side
   Livewire action (choosePath()), not navigation. */
.path-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.path-card:hover {
  border-color: var(--verified);
  transform: translateY(-2px);
}
.path-card:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}
.path-card:focus-visible {
  outline: 2px solid var(--verified);
  outline-offset: 2px;
}
.path-card h4 {
  margin: 0 0 0.3em;
  font-size: 1rem;
  color: var(--ink);
}
.path-card p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.path-card--agency {
  border-style: dashed;
}

.signup-layout {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 800px) {
  .signup-layout {
    grid-template-columns: 1fr;
  }
}
.signup-form-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.step-list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: grid;
  gap: var(--space-3);
}
.step-list li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}
.step-list__number {
  flex-shrink: 0;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: var(--verified);
  color: var(--accent-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.95rem;
}
.step-list__body h4 {
  margin: 0 0 0.15em;
  font-size: 1rem;
}
.step-list__body p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* auto-fit stretches a lone card to fill the entire row — looks like an
   oversized, oddly empty banner when a category/page only has one or two
   results. auto-fill leaves the remaining track empty instead, so a
   single card reads as "one card in a grid," not "a stretched card
   pretending to be a hero section." Distinct from the shared .card-grid
   (used elsewhere for company/freelancer listings, where the auto-fit
   stretch behavior is fine) so this doesn't change behavior anywhere else. */
/* Same auto-fit-stretches-a-lone-card issue as .article-card-grid above,
   applied to the pricing page's plan cards — a page with just 1-2 plans
   (before agency tiers are added, or after temporarily removing one)
   shouldn't render an oversized stretched card. Reuses .listing-card for
   each plan's actual styling, just swaps the container's grid behavior. */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}

.article-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}
.article-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
}
.article-card:hover {
  transform: translateY(-3px);
  border-color: var(--verified);
  box-shadow: 0 12px 28px rgba(45, 212, 191, 0.18);
}
.article-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--paper);
}
.article-card__thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.article-card__body {
  padding: var(--space-2) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.article-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.article-card h3 {
  margin: 0 0 0.4em;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--ink);
}
.article-card__link:hover h3 {
  color: var(--verified);
}
.article-card__excerpt {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0 0 var(--space-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card__byline {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink-faint);
  margin-top: auto;
  padding-top: var(--space-1);
  border-top: 1px solid var(--line);
}
.article-card__byline a {
  color: var(--ink-faint);
}
.article-card__byline a:hover {
  color: var(--verified);
}

.detail-header {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

/* Logo + name sit inline together instead of logo stacked above name. */
.detail-header__identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.detail-header__logo {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.detail-header__cover {
  width: 100%;
  max-height: 280px;
  aspect-ratio: 16 / 5;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
}

/* Breathing room between the category tags and the description text, and
   a readable line length for what's often several paragraphs of prose —
   was running the full width of .detail-header (which, before .detail-page
   existed above, meant the full viewport). */
.detail-header__description {
  margin-top: var(--space-3);
  max-width: 70ch;
}

.detail-meta {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-bottom: var(--space-3);
}

/* Primary category gets the branded/filled treatment so it reads as "the"
   category for this listing; secondary categories and offered services
   stay on the plain outline .tag style so the hierarchy between "what this
   business fundamentally is" and "what else it's tagged with" is visible
   instead of every pill looking identical. */
.tag--category {
  border-color: var(--verified);
  color: var(--verified);
  background: var(--verified-bg);
  font-weight: 500;
}

.service-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 0;
  margin: var(--space-3) 0;
}

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  padding: 0.7em 1.5em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--ink);
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--card-hover); border-color: var(--verified); }
.btn--verified {
  border: none;
  background: var(--accent-gradient);
  color: var(--accent-foreground);
}
.btn--verified:hover { filter: brightness(1.1); background: var(--accent-gradient); color: var(--accent-foreground); }

/* ---------- Article page ---------- */

/* .site-main itself has no real max-width (max-width: 100% is effectively
   unbounded) — fine for the homepage/dashboard/directory grids, which want
   the full width, but long-form content had nothing constraining it. The
   h1/byline/hero image were stretching to the full viewport width with
   only the body paragraphs capped (via the existing 68ch below), which is
   why a 1024x1024 featured image rendered enormous edge-to-edge. */
.article-page {
  max-width: 760px;
  margin: 0 auto;
}

.article-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: var(--space-4);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}
.article-hero img { object-fit: cover; }

.article-header { margin-bottom: var(--space-3); }
.article-byline {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.article-byline a { color: var(--verified); }

.facts-block {
  background: var(--card);
  border-left: 3px solid var(--verified);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-3);
  margin: var(--space-3) 0 var(--space-4);
}
.facts-block ul {
  margin: var(--space-1) 0 0;
  padding-left: 1.2em;
}

.article-body {
  font-size: 1.05rem;
}
.article-body :is(p, ul, ol) { max-width: 68ch; }

.key-takeaway {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.1rem;
}

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

.form-page { max-width: 640px; }

.password-setup-shell { width:100%; display:grid; place-items:center; padding:var(--space-3) 0 var(--space-2); }
.password-setup-card { width:min(960px,100%); display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr); overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper); box-shadow:0 24px 70px rgba(0,0,0,.16); }
.password-setup-form { padding:clamp(28px,5vw,58px); }
.password-setup-form h1 { max-width:none; margin:8px 0 12px; font-size:clamp(2.2rem,5vw,3.6rem); line-height:1; }
.password-setup-lead { max-width:48ch; margin-bottom:var(--space-3); color:var(--ink-soft); }
.password-setup-icon { width:44px; height:44px; display:grid; place-items:center; margin-bottom:var(--space-3); border-radius:50%; background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent); font-size:1.25rem; font-weight:800; }
.password-setup-email { display:flex; justify-content:space-between; gap:var(--space-2); margin:0 0 var(--space-3); padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--paper-2); font-size:.9rem; }
.password-setup-email span { color:var(--ink-soft); }
.password-input-wrap { position:relative; display:block; margin-top:7px; }
.password-input-wrap input { width:100%; padding-right:64px; }
.password-toggle { position:absolute; right:10px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--accent); font:700 .8rem var(--font-body); cursor:pointer; }
.password-requirements { margin:-4px 0 var(--space-3); padding-left:1.25rem; color:var(--ink-soft); font-size:.86rem; }
.password-setup-error { padding:10px 12px; border-left:3px solid var(--danger); background:color-mix(in srgb,var(--danger) 10%,transparent); }
.password-setup-action { width:100%; display:inline-flex; justify-content:center; margin-top:var(--space-2); text-decoration:none; }
.password-setup-note { margin:var(--space-2) 0 0; text-align:center; color:var(--ink-soft); font-size:.78rem; }
.password-setup-aside { display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-4); padding:clamp(28px,5vw,58px); border-left:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 12%,var(--paper)),var(--paper-2)); }
.password-setup-aside h2 { margin:8px 0 12px; font-size:clamp(1.55rem,3vw,2.25rem); }
.password-setup-aside p { color:var(--ink-soft); }
.password-setup-benefits { display:grid; gap:var(--space-3); }
.password-setup-benefits>div { display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:start; }
.password-setup-benefits span { color:var(--accent); font:700 .76rem var(--font-mono); }
.password-setup-benefits p { margin:0; }
.password-setup-benefits strong { color:var(--ink); }
.password-setup-support { margin:0; font-size:.88rem; }
@media (max-width:760px) {
  .password-setup-shell { min-height:auto; padding:var(--space-2) 0; }
  .password-setup-card { grid-template-columns:1fr; }
  .password-setup-aside { border-left:0; border-top:1px solid var(--line); }
  .password-setup-email { flex-direction:column; }
}

/* ---------- Auth split layout (login/signup) ----------
   Pulls out of .site-main's normal padding via negative margins so the
   branded left panel can reach the viewport edges, matching a typical
   two-column auth-page pattern, while keeping this site's persistent nav
   above it (unlike the reference this was modeled on, which has no header
   at all — removing the site nav on auth pages is a bigger structural
   change than reskinning this one page, so it stays for now). */
.auth-split {
  display: grid;
  grid-template-columns: minmax(320px, .95fr) minmax(420px, 1.25fr);
  min-height: calc(100dvh - 69px);
  margin: calc(var(--space-5) * -1) calc(var(--space-4) * -1) calc(var(--space-6) * -1);
}
@media (max-width: 800px) {
  .auth-split {
    grid-template-columns: 1fr;
    min-height: auto;
  }
}

.auth-split__brand {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 18%, rgba(45, 212, 191, 0.10), transparent 34%),
    linear-gradient(145deg, var(--card) 0%, var(--paper) 72%);
  color: var(--ink);
  border-right: 1px solid var(--line);
  padding: clamp(1.5rem, 5vh, 3.6rem) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.auth-split__brand-content {
  width: 100%;
  max-width: 650px;
}
.auth-split__brand::after {
  content: "";
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--verified), transparent 72%);
  opacity: 0.65;
}
.auth-split__brand h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: clamp(1.4rem, 4vh, 2.2rem) 0 var(--space-2);
  color: var(--ink);
}
.auth-split__brand p {
  color: var(--ink-soft);
}
.auth-split__logo {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-weight: 700;
  font-size: 1.1rem;
}
.auth-split__benefits {
  list-style: none;
  padding: 0;
  margin: clamp(1.5rem, 5vh, 2.8rem) 0;
  display: grid;
  gap: var(--space-2);
}
.auth-split__benefits li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: var(--ink-soft);
}
.auth-split__benefits li::first-letter { color: var(--verified); }
.auth-split__trust {
  margin: clamp(1.5rem, 5vh, 3rem) 0 0;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

@media (max-width: 800px) {
  .auth-split__brand { border-right: 0; border-bottom: 1px solid var(--line); }
}

.auth-split__form {
  background: var(--paper);
  padding: clamp(1.25rem, 4vh, 2.75rem) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-split__form > div {
  width: 100%;
  max-width: 650px;
  padding: clamp(1.4rem, 3.2vh, 2.5rem) clamp(1.5rem, 3vw, 2.75rem);
  background: linear-gradient(145deg, rgba(255,255,255,.025), transparent 65%), var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .18);
}
.auth-split__form h1 {
  margin-top: .35rem;
  max-width: 13ch;
  font-size: clamp(2.4rem, 4vw, 4rem);
  line-height: .98;
}
.auth-split__form form {
  margin-top: clamp(1rem, 2.5vh, var(--space-3));
}
@media (max-height: 760px) and (min-width: 801px) {
  .auth-split__form,
  .auth-split__brand { padding-top: 1rem; padding-bottom: 1rem; }
  .auth-split__form > div { padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .auth-split__form h1 { font-size: 2.55rem; }
  .auth-split__form form { margin-top: .85rem; }
  .auth-split__form .field { margin-bottom: .85rem; }
  .auth-split__brand h2 { margin-top: 1.25rem; }
  .auth-split__benefits { margin: 1.4rem 0; }
  .auth-split__trust { margin-top: 1.4rem; }
}
@media (max-width: 800px) {
  .auth-split__form { padding: var(--space-3); }
  .auth-split__form > div { padding: var(--space-3); }
  .auth-split__brand { align-items: stretch; }
}

.field {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.field small {
  display: block;
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-top: 0.3em;
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="file"], textarea, select {
  display: block;
  width: 100%;
  margin-top: 0.5em;
  padding: 0.7em 0.9em;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
textarea { min-height: 120px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--verified); outline-color: var(--verified); }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }

.radio-row {
  display: flex;
  gap: var(--space-3);
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: var(--space-3);
}
.radio-row label {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.95rem;
  color: var(--ink);
}

.submit-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.8em 1.9em;
  background: var(--accent-gradient);
  color: var(--accent-foreground);
  border: none;
  border-radius: var(--radius-pill);
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 16px rgba(45, 212, 191, 0.25);
}
.submit-btn:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(45, 212, 191, 0.4); }
.submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

[role="alert"] {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--danger);
  border-left: 3px solid var(--danger);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.5em 0.8em;
  background: rgba(248, 113, 113, 0.08);
}

/* Success counterpart to [role="alert"] above — same shape, verified
   green instead of danger red. Before this, success feedback across the
   app was ad hoc (a raw color:green inline style in one place, nothing
   at all in another), inconsistent with the one clean, shared
   convention error messages already had. */
[role="status"].status-success {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--verified);
  border-left: 3px solid var(--verified);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.5em 0.8em;
  background: rgba(45, 212, 191, 0.08);
}

/* ---------- Review queue table ---------- */

.review-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.review-table th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  text-align: left;
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--line-strong);
}
.review-table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.decision-buttons { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
.decision-buttons button {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  padding: 0.4em 0.8em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
}
.decision-buttons button:hover { border-color: var(--verified); color: var(--verified); }
.decision-buttons button:disabled { opacity: 0.5; cursor: not-allowed; }
.decision-buttons textarea { margin-bottom: var(--space-1); font-family: var(--font-body); }

/* ---------- Search / browse (pagination-aware listing pages) ---------- */

.search-bar {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
  margin: var(--space-3) 0;
}
.search-bar input[type="text"] { width: auto; flex: 1 1 240px; margin-top: 0; }
.search-bar label { display: flex; align-items: center; gap: 0.4em; font-family: var(--font-mono); font-size: 0.85rem; white-space: nowrap; }
.search-bar select { width: auto; margin-top: 0; flex: 0 1 200px; }

.results-meta {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin: var(--space-2) 0;
}

.pager {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.pager a, .pager span.disabled {
  padding: 0.5em 1em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--ink-soft);
}
.pager a:hover { border-color: var(--verified); color: var(--verified); }
.pager span.disabled { color: var(--ink-faint); opacity: 0.5; }

/* ---------- Dashboard page ---------- */

.org-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.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;
}
.agency-listings-manager {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.agency-listings-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(160px, 220px);
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.agency-listings-toolbar .field { margin: 0; }
.agency-listings-toolbar input,
.agency-listings-toolbar select { margin: 0; }
.agency-listings-results.is-loading { opacity: .55; pointer-events: none; }
.agency-listings-table-wrap { overflow: visible; }
.agency-listings-table { width: 100%; border-collapse: collapse; }
.agency-listings-table th {
  padding: .7rem;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: .75rem;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.agency-listings-table td { padding: .8rem .7rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.agency-listings-table td:first-child { min-width: 210px; }
.agency-listings-table th:nth-child(4),
.agency-listings-table td:nth-child(4) {
  min-width: 122px;
  white-space: nowrap;
}
.agency-listings-table th:last-child,
.agency-listings-table td:last-child {
  width: 36%;
  min-width: 280px;
}
.agency-listings-table td:first-child a { color: var(--ink); text-decoration: none; }
.agency-listings-table td:first-child a:hover { color: var(--verified); }
.agency-listings-table td small { display: block; max-width: 300px; overflow: hidden; color: var(--ink-faint); text-overflow: ellipsis; white-space: nowrap; }
.agency-listing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .45rem;
  min-width: 0;
  max-width: 100%;
}
.agency-listing-actions .btn {
  min-height: 38px;
  padding: .55rem .75rem;
  white-space: nowrap;
}
.agency-listing-ai { position: relative; }
.agency-listing-ai > summary { list-style: none; }
.agency-listing-ai > summary::-webkit-details-marker { display: none; }
.agency-listing-ai--business { margin-top: .45rem; width: max-content; }
.agency-listing-ai__trigger {
  color: var(--verified);
  cursor: pointer;
  font: 600 .78rem var(--font-mono);
  letter-spacing: .02em;
  white-space: nowrap;
}
.agency-listing-ai__trigger:hover { color: var(--ink); }
.agency-listing-ai--business .agency-listing-ai__panel {
  right: auto;
  left: 0;
}
.agency-listing-ai__panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + .5rem);
  right: 0;
  width: min(430px, 80vw);
  max-height: min(560px, 65vh);
  overflow-y: auto;
  padding: var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
}
.pager button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 680px) {
  .agency-listings-toolbar { grid-template-columns: 1fr; }
  .agency-listings-manager { padding: var(--space-2); }
  .agency-listings-table-wrap { overflow-x: auto; }
  .agency-listing-actions { min-width: 300px; }
  .agency-listing-ai__panel {
    position: fixed;
    top: 12vh;
    right: 5vw;
    left: 5vw;
    width: auto;
    max-height: 76vh;
  }
}

/* Same bordered-card look as .detail-header/.listing-card, minus the
   hover lift (this holds a form, not a link) — was bare page background
   with no border, so it read as unfinished/floating next to the boxed
   header above it instead of matching the page's visual language. */
.info-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.listing-card details summary {
  list-style: none;
}
.listing-card details summary::-webkit-details-marker {
  display: none;
}
.listing-card details summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 0.4em;
  color: var(--ink-faint);
  transition: transform 0.15s ease;
}
.listing-card details[open] summary::before {
  transform: rotate(90deg);
}

/* ---------- AI Article Studio (compact tool layout, not a marketing card) ---------- */

.studio-shell {
  width: 100%;
  max-width: 920px;
  margin: var(--space-4) auto 0;
  padding: var(--space-3);
}

.studio-shell h3 {
  font-size: 1.3rem;
}

.studio-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  margin: var(--space-2) 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.studio-progress__step {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  padding: 0.65rem 0.75rem;
  cursor: pointer;
  text-align: left;
}
.studio-progress__step small {
  font-size: 0.58rem;
  opacity: 0.75;
}
.studio-progress__step:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}
.studio-progress__step--active {
  border-color: var(--verified);
  background: color-mix(in srgb, var(--verified) 8%, transparent);
  color: var(--ink);
}
.studio-progress__step::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: transparent;
  flex-shrink: 0;
}
.studio-progress__step--done {
  color: var(--verified);
}
.studio-progress__step--done::before {
  background: var(--verified);
  border-color: var(--verified);
}

.step-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
}
.step-card > small {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.step-card p {
  font-size: 0.9rem;
  margin: 0.4em 0 var(--space-1);
}
.step-card .field {
  margin-bottom: var(--space-2);
}
.studio-stage > .field {
  margin-bottom: var(--space-2);
}
.studio-stage > .field textarea[wire\:model="body"] {
  min-height: 260px;
}
.studio-actions {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}
.studio-actions--between {
  justify-content: space-between;
}

.studio-completion-message {
  margin: var(--space-2) 0 0;
  padding: .8rem 1rem;
  border-left: 3px solid var(--verified);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: color-mix(in srgb, var(--verified) 9%, transparent);
  color: var(--ink);
}
.studio-completion-message strong { color: var(--verified); }

/* Sub-card for one of the two topic-selection paths inside Step 2 (AI
   Article Studio) — same nested-card idea as .step-card itself, one level
   lighter so "Option A" and "Option B" read as two alternatives within
   the same step rather than two separate steps. */
.studio-topic-path {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
}

.studio-shell > .field {
  margin-bottom: var(--space-2);
}
.studio-shell > .field textarea {
  min-height: 70px;
}
.studio-shell > .field textarea[wire\:model="body"] {
  min-height: 260px;
}

@media (max-width: 640px) {
  .studio-progress { grid-template-columns: 1fr 1fr; }
  .studio-progress__step { padding: 0.55rem; }
}

/* Fix: featured images rendering at natural size instead of filling the
   16:9 hero box — object-fit needs explicit width/height on the <img>
   itself to have any effect. */
.article-hero img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ---------- Dashboard: per-listing action cards ---------- */

.action-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2);
  margin: var(--space-2) 0;
}
.action-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
}
.action-card p:not(.eyebrow) {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0 0 var(--space-2);
  flex: 1;
}
.action-card .btn,
.action-card .btn--verified {
  align-self: flex-start;
}


/* ---------- Clickable star rating widget (review form) ---------- */

.star-rating {
  display: flex;
  gap: 0.2em;
  margin: 0.3em 0;
}
.star-rating__star {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0;
  color: var(--line);
  transition: transform 0.1s ease, color 0.1s ease;
}
.star-rating__star.is-filled {
  color: var(--verified);
}
.star-rating__star:hover {
  transform: scale(1.2);
}

/* NOTE: .detail-header / .detail-header__identity / .detail-header__logo /
   .detail-header__description were previously re-declared here as a second
   "fixes" patch on top of the original block above — two separate authors
   editing the same rules in two places. Consolidated into the single
   definitions in the "Company / person detail page" section above; nothing
   should be added back here for these selectors. */

/* ---------- Growth chart (homepage signature element) ------------------
   Real data, not decoration: draws the site's actual verified-listing
   count over the last 12 months, sourced from Company.published_at
   (see HomeController). Plain SVG + CSS stroke-dashoffset animation
   instead of a JS charting library — one data series, one page, doesn't
   justify the dependency. Respects prefers-reduced-motion via the global
   rule at the top of this file (animation-duration forced to ~0). */
.growth-chart {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-3) var(--space-3);
  margin: var(--space-4) 0;
}
.growth-chart__caption {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin: var(--space-2) 0 0;
}
.growth-chart__svg {
  width: 100%;
  height: auto;
  display: block;
}
.growth-chart__line {
  fill: none;
  stroke: var(--verified);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--path-length, 1000);
  stroke-dashoffset: var(--path-length, 1000);
  animation: growth-chart-draw 1.8s ease-in-out forwards;
}
.growth-chart__fill {
  opacity: 0;
  animation: growth-chart-fade 0.8s ease forwards;
  animation-delay: 1.1s;
}
.growth-chart__month {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--ink-faint);
  text-transform: uppercase;
}
.growth-chart__dot {
  fill: var(--verified);
  opacity: 0;
  animation: growth-chart-fade 0.4s ease forwards;
  animation-delay: 1.6s;
}
@keyframes growth-chart-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes growth-chart-fade {
  to { opacity: 1; }
}
[x-cloak] { display: none !important; }

.featured-image-preview {
    width: min(100%, 36rem);
    margin: .6rem 0 var(--space-2);
}

.featured-image-preview__trigger {
    position: relative;
    display: block;
    width: min(100%, 22rem);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: #fff;
    cursor: zoom-in;
    text-align: left;
}

.featured-image-preview__trigger img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.featured-image-preview__trigger span {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    padding: .45rem .7rem;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    background: rgba(5,10,18,.82);
    font-size: .78rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
}

.image-lightbox {
    position: fixed;
    z-index: 1000;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    display: grid;
    place-items: center;
    overflow: auto;
    box-sizing: border-box;
    padding: clamp(.75rem, 2vw, 1.5rem);
    background: rgba(2,5,10,.88);
    backdrop-filter: blur(10px);
}

.image-lightbox__panel {
    position: relative;
    display: grid;
    width: min(92vw, 52rem, calc(100dvh - 3rem));
    max-height: calc(100dvh - 1.5rem);
    box-sizing: border-box;
    padding: 1rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: 0 24px 80px rgba(0,0,0,.55);
}

.image-lightbox__panel img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: calc(100dvh - 6.5rem);
    margin-inline: auto;
    object-fit: contain;
    border-radius: calc(var(--radius-sm) - 4px);
}

.image-lightbox__panel p {
    margin: .75rem 2.5rem 0 0;
    color: var(--muted);
}

.image-lightbox__close {
    position: absolute;
    z-index: 1;
    top: 1.5rem;
    right: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    background: rgba(5,10,18,.86);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

html.image-preview-open {
    overflow: hidden;
}