/* ==========================================================================
   CorporateLeaks
   Reddit x anonymous confession board x street-sticker aesthetic.
   Deliberately not corporate SaaS: the look is part of the promise that this
   isn't another sanitised employer-branding site.

   Palette rule: yellow is the brand accent, black + off-white dominate,
   blue/teal/lavender appear sparingly on cards and tags. No pink anywhere.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@600;700&display=swap');

:root {
  /* ---- Brand constants (identical in both themes) ---- */
  --yellow:     #FFD83D;
  --yellow-dk:  #E5B900;
  --blue:       #3155FF;
  --teal:       #35C9B0;
  --red:        #D93A3A;
  --green:      #1F9254;

  /* ---- Semantic tokens: every rule below uses THESE, never raw hex, so a
          theme swap is a matter of redefining this block. ---- */
  --bg:          #FAFAF7;   /* page */
  --surface:     #FFFFFF;   /* cards, header, hero panel */
  --surface-2:   #FAFAF7;   /* insets: avatars, chips, table stripes */
  --ink:         #111111;   /* primary text + borders */
  --ink-soft:    #55585E;   /* body copy */
  --ink-faint:   #8A8F97;   /* meta, captions */
  --line:        #E4E3DD;   /* hairlines */
  --line-soft:   #EFEEE9;
  --border:      #111111;   /* the heavy sticker-style outline */
  --shadow-rgb:  17, 17, 17;

  /* Pale card washes */
  --lt-blue:     #DDE8FF;
  --lt-green:    #DDF4E5;
  --lt-yellow:   #FFF3B0;
  --lt-lav:      #E8E5FF;
  --cream:       #FBF6E8;
  --wash-ink:    #111111;   /* text on the pale washes */

  /* Inverted blocks (sidebar CTA, final CTA, footer) are near-black in light
     mode; in dark mode they lift OFF the page instead, or they vanish. */
  --invert-bg:   #111111;
  --invert-ink:  #FFFFFF;
  --invert-soft: #B9BDC4;
  --invert-faint:#7E838B;
  --invert-line: #34383F;

  /* Solid action buttons. Separate from --invert-bg because a large dark
     panel and a small dark button need different treatment once the page
     itself is dark. */
  --btn-solid-bg:  #111111;
  --btn-solid-ink: #FFFFFF;

  --alert-ok-bg: #DDF4E5;  --alert-ok-ink: #12603A;
  --alert-no-bg: #FBEAEA;  --alert-no-ink: #8E2020;
  --alert-in-bg: #DDE8FF;  --alert-in-ink: #1A3AAF;
  --alert-wa-bg: #FFF3B0;  --alert-wa-ink: #7A5C00;

  --grain-opacity: .028;
  --hero-art-dim: 0;        /* dark mode dims the artwork to sit on dark bg */

  --r-sm: 12px;
  --r:    16px;
  --r-lg: 22px;
}

/* ==========================================================================
   Dark theme
   Not an inversion: the sticker aesthetic depends on heavy outlines, which
   would glare pure white on black. Borders become a soft grey, surfaces are
   raised rather than black, and the pale card washes become deep tints that
   keep their hue identity (blue card still reads blue).
   ========================================================================== */
:root[data-theme="dark"] {
  --bg:          #14161A;
  --surface:     #1C1F25;
  --surface-2:   #23272E;
  --ink:         #F2F3F5;
  --ink-soft:    #B6BBC3;
  --ink-faint:   #868C96;
  --line:        #2E333B;
  --line-soft:   #272B32;
  --border:      #3A404A;
  --shadow-rgb:  0, 0, 0;

  --lt-blue:     #1E2A44;
  --lt-green:    #16301F;
  --lt-yellow:   #322A0E;
  --lt-lav:      #262340;
  --cream:       #2A2620;
  --wash-ink:    #E8EAED;

  /* Inverted blocks lift off the dark page rather than sinking into it. */
  --invert-bg:   #262B33;
  --invert-ink:  #FFFFFF;
  --invert-soft: #B6BBC3;
  --invert-faint:#868C96;
  --invert-line: #3A404A;

  --btn-solid-bg:  #F2F3F5;
  --btn-solid-ink: #111111;

  --alert-ok-bg: #16301F;  --alert-ok-ink: #7CD9A4;
  --alert-no-bg: #3A1D1D;  --alert-no-ink: #F1A3A3;
  --alert-in-bg: #1E2A44;  --alert-in-ink: #A8C0FF;
  --alert-wa-bg: #322A0E;  --alert-wa-ink: #EBC964;

  --grain-opacity: .05;
  --hero-art-dim: .18;
  color-scheme: dark;
}

/* Respect the OS preference when the user has not chosen explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #14161A;
    --surface:     #1C1F25;
    --surface-2:   #23272E;
    --ink:         #F2F3F5;
    --ink-soft:    #B6BBC3;
    --ink-faint:   #868C96;
    --line:        #2E333B;
    --line-soft:   #272B32;
    --border:      #3A404A;
    --shadow-rgb:  0, 0, 0;

    --lt-blue:     #1E2A44;
    --lt-green:    #16301F;
    --lt-yellow:   #322A0E;
    --lt-lav:      #262340;
    --cream:       #2A2620;
    --wash-ink:    #E8EAED;

    --invert-bg:   #262B33;
    --invert-ink:  #FFFFFF;
    --invert-soft: #B6BBC3;
    --invert-faint:#868C96;
    --invert-line: #3A404A;

    --btn-solid-bg:  #F2F3F5;
    --btn-solid-ink: #111111;

    --alert-ok-bg: #16301F;  --alert-ok-ink: #7CD9A4;
    --alert-no-bg: #3A1D1D;  --alert-no-ink: #F1A3A3;
    --alert-in-bg: #1E2A44;  --alert-in-ink: #A8C0FF;
    --alert-wa-bg: #322A0E;  --alert-wa-ink: #EBC964;

    --grain-opacity: .05;
    --hero-art-dim: .18;
    color-scheme: dark;
  }
}

/* Legacy aliases so older rules keep resolving during the migration. */
:root, :root[data-theme="dark"] {
  --paper: var(--bg);
  --white: var(--surface);
  --black: var(--ink);
  --charcoal: var(--invert-bg);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  line-height: 1.6;
  font-size: 15px;
  /* Subtle paper grain so flat colour never reads as generic SaaS. */
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 15% 12%, rgba(49,85,255,.035) 0, transparent 38%),
    radial-gradient(circle at 85% 8%, rgba(255,216,61,.075) 0, transparent 34%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.028'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

h1, h2, h3 { font-family: 'Space Grotesk', 'Inter', sans-serif; letter-spacing: -.02em; }

/* Handwritten annotations. Used sparingly, always as marginalia. */
.hand { font-family: 'Caveat', cursive; font-weight: 700; }
.scribble {
  font-family: 'Caveat', cursive; font-weight: 700;
  color: var(--ink-faint); font-size: 17px; line-height: 1.25;
  display: inline-block;
}

/* Yellow marker highlight -- slightly irregular, like a real marker stroke. */
.mark {
  background: var(--yellow);
  color: #111111;   /* yellow never changes, so its text must not either */
  padding: 0 .22em; display: inline-block;
  border-radius: 3px 8px 4px 7px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap;
  padding: 11px 20px; border-radius: var(--r-sm);
  font-family: inherit; font-weight: 700; font-size: 14px;
  border: 2px solid var(--border); background: var(--surface); color: var(--ink);
  cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, background .14s;
}
.btn:hover { transform: scale(1.03) translateY(-1px); box-shadow: 3px 3px 0 var(--border); }
.btn:active { transform: scale(.99); box-shadow: 1px 1px 0 var(--border); }
.btn-dark   { background: var(--btn-solid-bg); color: var(--btn-solid-ink); border-color: var(--btn-solid-bg); }
.btn-dark:hover  { box-shadow: 3px 3px 0 var(--yellow-dk); }
.btn-yellow { background: var(--yellow); }
.btn-sm { padding: 7px 13px; font-size: 13px; border-width: 1.5px; }
.btn-lg { padding: 15px 28px; font-size: 16px; border-radius: var(--r); }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; gap: 26px;
  max-width: 1180px; margin: 0 auto; padding: 13px 20px;
}
.logo {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 23px; letter-spacing: -.035em; white-space: nowrap;
  display: inline-flex; align-items: baseline; gap: 1px;
}
.logo .lk {
  background: var(--yellow); color: #111111; padding: 0 7px;
  border-radius: 4px 10px 5px 9px; transform: rotate(-1.2deg);
  display: inline-block;
}
.logo-mask { font-size: 19px; margin-right: 5px; }

.nav { display: flex; gap: 22px; align-items: center; }
.nav > a {
  font-size: 14px; font-weight: 500; color: var(--ink-soft);
  position: relative; padding: 3px 0; transition: color .12s;
}
.nav > a:hover { color: var(--ink); }
.nav > a.active { color: var(--ink); font-weight: 600; }
/* Hand-drawn underline on the active item. */
.nav > a.active::after {
  content: ""; position: absolute; left: -3px; right: -3px; bottom: -4px; height: 6px;
  background: no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 7'%3E%3Cpath d='M2 4.6C14 2.2 30 1.4 46 2.6c10 .8 20 2.2 32 1' stroke='%23FFD83D' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--surface); display: grid; place-items: center; cursor: pointer;
  font-size: 15px; transition: border-color .14s, transform .14s;
}
.icon-btn:hover { border-color: var(--border); transform: translateY(-1px); }
.nav-toggle { display: none; }

/* ---------- Theme toggle ----------
   One button that reports the CURRENT theme and switches to the other.
   The sun/moon swap is driven by the root attribute so it stays correct
   when the theme comes from the OS preference rather than a click. */
.theme-toggle { position: relative; font-size: 16px; }
.theme-toggle .t-dark { display: none; }
.theme-toggle .t-light { display: block; }
:root[data-theme="dark"] .theme-toggle .t-dark { display: block; }
:root[data-theme="dark"] .theme-toggle .t-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .t-dark { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .t-light { display: none; }
}

/* Artwork is authored for a light page; in dark mode a slight dim and
   desaturation stops it glowing against the darker surroundings. */
.scene img { filter: brightness(calc(1 - var(--hero-art-dim))) saturate(calc(1 - var(--hero-art-dim) * 0.8)); }

/* ---------- Hero ----------
   Full-bleed: the artwork runs to the top and right edges of the viewport and
   sits flush under the sticky header, with the text column over a white panel
   on the left. The page's paper background resumes below the hero. */
.hero {
  position: relative; background: var(--bg);
  overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 600px) 1fr;
  gap: 0; align-items: center; min-height: 470px;
}
.hero-text {
  padding: 46px 34px 48px 0; position: relative; z-index: 2;
}

.hero h1 {
  font-size: clamp(34px, 4.6vw, 58px); line-height: .98; margin: 0 0 18px;
  font-weight: 700; text-transform: uppercase; letter-spacing: -.035em;
}
.hero h1 .mark { border-radius: 4px 14px 6px 12px; }
.hero-lede { font-size: 16.5px; color: var(--ink-soft); max-width: 460px; margin: 0 0 24px; }

/* Handwritten kicker above the headline -- never overlapping it. */
.hero-kicker {
  display: inline-block; transform: rotate(-2deg);
  margin: 0 0 12px; font-size: 19px; color: var(--ink-faint);
}
.hero-kicker .arrow { color: var(--yellow-dk); }
.hero-aside { display: inline-block; margin: 12px 0 0 4px; transform: rotate(-2deg); color: var(--ink-faint); }

.searchbar {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--r-lg); padding: 5px 5px 5px 17px;
  max-width: 540px; box-shadow: 3px 3px 0 rgba(var(--shadow-rgb), .08);
}
.searchbar .mag { color: var(--ink-faint); font-size: 15px; }
.searchbar input {
  flex: 1; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: 15px; padding: 11px 0; min-width: 0;
}
.searchbar button {
  border: 0; background: var(--btn-solid-bg); color: var(--btn-solid-ink); cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 14px;
  padding: 12px 26px; border-radius: 16px; transition: transform .14s, background .14s;
  white-space: nowrap;
}
.searchbar button:hover { transform: scale(1.04); opacity: .88; }

.stats { display: flex; gap: 24px; margin-top: 24px; flex-wrap: wrap; }
/* The last stat sits closest to the artwork -- a small chip of page colour
   behind each label keeps every one legible where they overlap. */
.stat-l, .stat-n { position: relative; }
.stat { display: flex; align-items: center; gap: 10px; }
.stat .ico { font-size: 21px; }
.stat-n { font-size: 22px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.stat-l { font-size: 12px; color: var(--ink-faint); font-weight: 500; }

/* ---------- Hero artwork ----------
   Absolutely positioned so it can bleed past the grid column to the viewport
   edge. The left edge is feathered in the asset AND masked here, so it melts
   into the white text panel rather than ending on a line. */
/* The image is positioned directly rather than filling a percentage-height
   chain: <picture> is an inline wrapper with no height of its own, so
   height:100% on the <img> inside it collapses to zero. Absolute insets on
   the image itself avoid depending on any ancestor's computed height. */
.scene { position: static; }
.scene picture { display: contents; }
.scene img {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 54%; height: 100%; object-fit: cover; object-position: left center;
  z-index: 1; pointer-events: none; display: block;
  /* Two-axis fade: the left edge dissolves into the text column, and the
     bottom softens so the art does not end on a hard horizontal cut where
     the feature cards begin. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 30%, #000 100%),
    linear-gradient(to bottom, #000 0, #000 76%, transparent 99%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0, #000 30%, #000 100%),
    linear-gradient(to bottom, #000 0, #000 76%, transparent 99%);
  mask-composite: intersect;
}

@media (max-width: 900px) {
  /* Stacked: text first, artwork full-width below it. */
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-text { padding: 34px 0 26px; }
  /* Source order puts the artwork first (it is absolutely positioned on
     desktop); on mobile it must read AFTER the headline, so the hero becomes
     a flex column and the artwork is ordered last. */
  .hero { display: flex; flex-direction: column; }
  .hero .wrap { order: 1; }
  .scene { order: 2; margin: 0 -20px; display: block; width: 100%; }
  .scene img {
    position: static !important;   /* clears the desktop absolute placement */
    width: 100%; height: auto;
    object-fit: contain; object-position: center;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 86%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0, #000 86%, transparent 100%);
  }
  .hero-aside { display: none; }
}

/* ---------- Feature cards ---------- */
.section { margin: 46px 0; }
.section-head {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; flex-wrap: wrap;
}
.section-head h2 { font-size: 27px; margin: 0; letter-spacing: -.03em; }
.section-head .more { margin-left: auto; font-size: 14px; font-weight: 600; }
.section-head > .btn:last-child { margin-left: auto; }
.section-head .more:hover .arw { transform: translateX(4px); }
.arw { display: inline-block; transition: transform .16s ease; }

.features { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.feature {
  border: 2px solid var(--border); border-radius: var(--r); padding: 18px 16px 15px;
  position: relative; transition: transform .16s ease, box-shadow .16s ease;
  display: flex; flex-direction: column; min-height: 158px;
}
.feature:hover { transform: translateY(-4px); box-shadow: 5px 5px 0 var(--border); }
.feature:hover .fa { transform: translateX(4px); }
.feature .ico { font-size: 27px; line-height: 1; }
.feature h3 { font-size: 15px; margin: 11px 0 5px; letter-spacing: -.02em; }
.feature p { font-size: 12.5px; color: var(--ink-soft); margin: 0; line-height: 1.42; }
.fa {
  width: 27px; height: 27px; border-radius: 50%; border: 1.5px solid var(--border);
  display: grid; place-items: center; font-size: 13px; margin-top: auto;
  background: rgba(255,255,255,.55); transition: transform .16s ease;
}
.f-1 { background: var(--lt-yellow); }
.f-2 { background: var(--lt-green); }
.f-3 { background: var(--lt-lav); }
.f-4 { background: var(--lt-blue); }
.f-5 { background: var(--cream); }
.f-6 { background: var(--lt-green); }

/* ---------- Trending companies ---------- */
.rail {
  display: flex; gap: 13px; overflow-x: auto; padding: 4px 2px 12px;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.rail::-webkit-scrollbar { height: 7px; }
.rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.co-card {
  display: block; flex: 0 0 142px; scroll-snap-align: start;
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--r);
  padding: 16px 12px; text-align: center;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s;
}
.co-card:hover { transform: translateY(-4px); box-shadow: 4px 4px 0 var(--yellow-dk); }
.co-logo {
  width: 42px; height: 42px; margin: 0 auto 9px; border-radius: 11px;
  display: grid; place-items: center; font-weight: 800; font-size: 17px;
  background: var(--bg); border: 2px solid var(--border);
}
.co-name {
  font-weight: 700; font-size: 13.5px; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.co-rating { font-size: 12.5px; font-weight: 700; color: var(--yellow-dk); margin-top: 3px; }
.co-count { font-size: 11.5px; color: var(--ink-faint); }
.co-add { border-style: dashed; background: var(--bg); }

/* Wrapping grid of company cards, for the listing and search pages. The
   homepage uses .rail (a single scrolling row) instead. */
.co-grid {
  display: grid; gap: 13px;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}
/* .co-card is authored for the flex .rail; in a grid the anchor stays inline
   and its border and padding collapse, so it needs an explicit block. */
.co-grid .co-card { flex: none; display: block; }

/* ---------- Main two-column layout ---------- */
.cols { display: grid; grid-template-columns: 65fr 35fr; gap: 26px; align-items: start; }

.card {
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--r); padding: 22px; margin-bottom: 20px;
}

.tabs { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 6px; }
.tab {
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1.5px solid var(--line); color: var(--ink-soft); background: var(--surface);
  transition: border-color .14s, color .14s, background .14s;
}
.tab:hover { border-color: var(--border); color: var(--ink); }
.tab.active { background: var(--btn-solid-bg); border-color: var(--btn-solid-bg); color: var(--btn-solid-ink); }

/* ---------- Post cards ---------- */
.post {
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: 17px; margin-top: 14px; position: relative;
  transition: background .16s ease, border-color .16s ease;
}
.post:hover { background: var(--surface-2); border-color: var(--line); }
.post-top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
.post-logo {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  font-weight: 800; font-size: 13px; background: var(--bg); border: 1.5px solid var(--border);
}
.post-co { font-weight: 700; font-size: 14px; letter-spacing: -.01em; }
.post-meta { font-size: 12px; color: var(--ink-faint); }
.post h3 { font-size: 16.5px; margin: 0 0 6px; letter-spacing: -.02em; }
.post h3 a:hover { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; }
.post p { margin: 0 0 12px; color: var(--ink-soft); font-size: 14px; }

.react { margin-left: auto; display: flex; gap: 13px; align-items: center; }
.react span, .react a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--ink-faint); font-weight: 600;
  transition: transform .14s ease, color .14s;
}
.react a:hover { color: var(--ink); transform: scale(1.14); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: 11.5px; padding: 4px 11px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line-soft);
  color: var(--ink-soft); font-weight: 500;
}
.badge {
  font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .5px;
}
.badge-verified { background: var(--green); color: var(--invert-ink); }
.badge-flag { background: var(--red); color: var(--invert-ink); }

/* Annotation pinned to a post card. */
.post-note {
  position: absolute; right: -6px; bottom: -12px;
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 15px;
  color: var(--ink-faint); transform: rotate(-3deg); background: var(--bg);
  padding: 2px 7px; pointer-events: none;
}

/* ---------- Sidebar ---------- */
.cta-dark {
  background: var(--invert-bg); color: var(--invert-ink); border-radius: var(--r);
  padding: 24px; margin-bottom: 20px; position: relative; overflow: hidden;
}
.cta-dark h3 { font-size: 22px; margin: 0 0 9px; color: var(--invert-ink); }
.cta-dark p { font-size: 13.5px; color: var(--invert-soft); margin: 0 0 18px; }
.cta-dark .fine { font-size: 11.5px; color: var(--invert-faint); text-align: center; margin: 11px 0 0; }

.quote-card {
  background: var(--lt-blue); border: 2px solid var(--border); border-radius: var(--r);
  padding: 20px; margin-bottom: 20px; position: relative;
}
.quote-card p {
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 19px;
  line-height: 1.32; margin: 0; padding-right: 54px;
}
/* Tiny character holding a SPILL IT sign. */
.spill {
  position: absolute; right: 12px; bottom: 12px; width: 46px; text-align: center;
}
.spill .head {
  width: 22px; height: 22px; border-radius: 50%; background: var(--surface);
  border: 2px solid var(--border); margin: 0 auto;
}
.spill .body {
  width: 30px; height: 18px; border: 2px solid var(--border); border-bottom: 0;
  border-radius: 9px 9px 0 0; background: var(--surface); margin: -2px auto 0;
}
.spill .sign {
  position: absolute; top: -14px; right: -8px; background: var(--yellow);
  border: 2px solid var(--border); border-radius: 3px; padding: 1px 6px;
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 12px;
  transform: rotate(9deg);
}

.pills { display: flex; flex-wrap: wrap; gap: 7px; }
.pills a {
  font-size: 12.5px; padding: 6px 13px; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--line); font-weight: 500;
  transition: border-color .14s, transform .14s;
}
.pills a:hover { border-color: var(--border); transform: translateY(-1px); }

.redflag-card {
  background: var(--lt-green); border: 2px solid var(--border);
  border-radius: var(--r); padding: 24px; position: relative; overflow: hidden;
}
.redflag-card h3 {
  font-size: 21px; margin: 0 0 12px; line-height: 1.16; text-transform: uppercase;
}
.redflag-card .flagico { font-size: 30px; margin-bottom: 8px; }

/* ---------- Final CTA ---------- */
.final-cta {
  background: var(--invert-bg); color: var(--invert-ink); border-radius: 26px;
  padding: 58px 30px; text-align: center; position: relative; overflow: hidden;
  margin: 50px 0;
}
.final-cta h2 {
  font-size: clamp(30px, 5vw, 52px); margin: 0 0 14px; color: var(--invert-ink);
  text-transform: uppercase; letter-spacing: -.035em;
}
.final-cta p { color: var(--invert-soft); font-size: 16px; margin: 0 0 26px; }
.final-cta .doodle { position: absolute; color: var(--invert-faint); pointer-events: none; }
.fd-1 { top: 30px;    left: 6%;   transform: rotate(-8deg); }
.fd-2 { bottom: 34px; left: 10%;  transform: rotate(4deg); }
.fd-3 { top: 46px;    right: 7%;  transform: rotate(7deg); }
.fd-4 { bottom: 30px; right: 11%; transform: rotate(-5deg); }

/* ---------- Footer ---------- */
.site-footer { background: var(--invert-bg); color: var(--invert-soft); padding: 46px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.site-footer h4 {
  color: var(--invert-ink); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .9px; margin: 0 0 13px; font-family: 'Inter', sans-serif; font-weight: 700;
}
.site-footer a { display: block; font-size: 13.5px; padding: 3px 0; color: var(--invert-soft); }
.site-footer a:hover { color: var(--yellow); }
.site-footer .logo { color: var(--invert-ink); }
.footer-bottom {
  border-top: 1px solid var(--invert-line); margin-top: 30px; padding-top: 20px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--invert-faint); align-items: center;
}
.social { display: flex; gap: 9px; }
.social a {
  width: 34px; height: 34px; border-radius: 9px; border: 1.5px solid var(--invert-line);
  display: grid; place-items: center; font-size: 13px; transition: all .14s;
}
.social a:hover { border-color: var(--yellow); color: var(--yellow); transform: translateY(-2px); }

/* ---------- Forms ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.field input[type=text], .field input[type=email], .field input[type=number],
.field input[type=url], .field textarea, .field select, .field input[type=file] {
  width: 100%; padding: 11px 14px; border: 2px solid var(--line);
  border-radius: var(--r-sm); font-family: inherit; font-size: 14px; background: var(--surface);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--border);
}
.field .help { font-size: 12px; color: var(--ink-faint); margin-top: 5px; }
.field.error input, .field.error textarea { border-color: var(--red); }
.field .err { color: var(--red); font-size: 13px; margin-top: 5px; font-weight: 500; }
.star-input { display: none; }
.star-row { display: flex; gap: 4px; align-items: center; }
.star-row label { cursor: pointer; font-size: 26px; color: var(--line); margin: 0; line-height: 1; }
.star-row label.on { color: var(--yellow-dk); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- Alerts & misc ---------- */
.alert {
  padding: 13px 16px; border-radius: var(--r-sm); margin-bottom: 16px;
  border: 2px solid; font-size: 14px; font-weight: 500;
}
.alert-success { background: var(--lt-green); border-color: var(--green); color: var(--alert-ok-ink); }
.alert-error   { background: var(--alert-no-bg); border-color: var(--red); color: var(--alert-no-ink); }
.alert-info    { background: var(--lt-blue); border-color: var(--blue); color: var(--alert-in-ink); }
.alert-warn    { background: var(--lt-yellow); border-color: var(--yellow-dk); color: var(--alert-wa-ink); }

.notice {
  background: var(--lt-yellow); border-left: 4px solid var(--yellow-dk);
  padding: 14px 16px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 13px; margin-bottom: 20px; color: var(--ink-soft);
}
.notice strong { color: var(--ink); }

.page-head { margin: 32px 0 22px; }
.page-head h1 { font-size: 36px; margin: 0 0 7px; letter-spacing: -.035em; }
.page-head p { color: var(--ink-soft); margin: 0; }

.empty { text-align: center; padding: 46px 20px; color: var(--ink-faint); }
.empty .ico { font-size: 40px; margin-bottom: 10px; }

.pagination { display: flex; gap: 8px; justify-content: center; margin: 26px 0; flex-wrap: wrap; }
.pagination a, .pagination span {
  padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--surface); font-size: 14px;
}
.pagination .cur { background: var(--btn-solid-bg); color: var(--btn-solid-ink); border-color: var(--btn-solid-bg); }

table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line); }
table.data th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--ink-faint); font-weight: 700;
}

.rating-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.rating-row .lbl { width: 140px; color: var(--ink-soft); flex-shrink: 0; }
.bar { flex: 1; height: 8px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--yellow); }
.rating-row .val { width: 28px; text-align: right; font-weight: 700; }
.big-rating { font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.stars { color: var(--yellow-dk); }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.photo-grid img { width: 100%; height: 160px; object-fit: cover; display: block; }
.photo-item { border: 2px solid var(--border); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.photo-item .cap { padding: 10px 12px; font-size: 12px; }

.prose { max-width: 720px; }
.prose h2 { font-size: 24px; margin: 28px 0 10px; }
.prose h3 { font-size: 16px; margin: 20px 0 8px; }
.prose p, .prose li { color: var(--ink-soft); font-size: 15px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 7px; }

/* ---------- Moderation ---------- */
.mod-bar { background: var(--invert-bg); color: var(--invert-ink); padding: 11px 0; font-size: 14px; margin-bottom: 22px; }
.mod-bar .wrap { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.mod-bar a { color: var(--invert-soft); font-weight: 500; }
.mod-bar a:hover { color: var(--yellow); }
.flag-box { background: var(--alert-no-bg); border: 2px solid var(--red); border-radius: var(--r-sm); padding: 12px 14px; margin: 12px 0; font-size: 13px; }
.overdue { background: var(--alert-no-bg); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1120px) {
  .features { grid-template-columns: repeat(3, 1fr); }
  /* Reclaim header width before the nav collapses: tighten the gaps and drop
     the two lowest-value links rather than letting the CTA overflow. */
  .header-inner { gap: 16px; }
  .nav { gap: 15px; }
  .nav > a:nth-last-of-type(1),
  .nav > a:nth-last-of-type(2) { display: none; }
  .hdr-login { display: none; }
}

@media (max-width: 1000px) {
  .nav { gap: 12px; }
  .nav > a { font-size: 13.5px; }
}

@media (max-width: 900px) {
  /* Hero stacks, illustration drops below the text. */
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-scribble { display: none; }
  .cols { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Navigation collapses to logo + search + hamburger. */
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 2px solid var(--border); padding: 8px 20px 16px;
  }
  .nav > a { padding: 11px 0; border-bottom: 1px solid var(--line); }
  .nav > a.active::after { display: none; }
  .nav-toggle { display: grid; }
  #nav-check:checked ~ .nav { display: flex; }
  .header-inner { position: relative; }
  .hdr-login { display: none; }
}

@media (max-width: 560px) {
  /* The full CTA label pushes the header off-screen on a phone. Keep the
     button (it's the primary action) but shorten it to the icon. */
  .header-inner { gap: 10px; padding: 11px 14px; }
  .logo { font-size: 19px; }
  .logo-mask { display: none; }
  .btn-cta-label { display: none; }
  .header-right .btn-dark { padding: 9px 13px; font-size: 16px; }
  .header-right { gap: 8px; }
}

@media (max-width: 640px) {
  /* Nothing may reach the screen edge: one gutter, set once on the wrapper. */
  .wrap { padding-left: 16px; padding-right: 16px; }
  .searchbar { max-width: 100%; padding-left: 14px; }
  .searchbar button { padding: 11px 18px; }
  .hero h1 { font-size: clamp(30px, 10vw, 44px); }
  body { overflow-x: hidden; }

  /* Feature cards become a horizontal rail. */
  .features {
    display: flex; overflow-x: auto; gap: 12px;
    padding-bottom: 10px; scroll-snap-type: x mandatory;
  }
  .feature { flex: 0 0 172px; scroll-snap-align: start; }
  .grid-2 { grid-template-columns: 1fr; }
  .stats { gap: 20px 26px; }
  .final-cta { padding: 42px 20px; }
  .final-cta .doodle { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { padding: 34px 0 30px; }
  .card { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Cards on the pale washes: their backgrounds become deep tints in dark mode,
   so text and icon strokes follow --wash-ink instead of assuming black. */
.feature, .feature h3, .quote-card, .quote-card p,
.redflag-card, .redflag-card h3 { color: var(--wash-ink); }
.feature p { color: var(--ink-soft); }
.fa { background: rgba(255,255,255,.55); border-color: var(--border); color: var(--wash-ink); }
:root[data-theme="dark"] .fa { background: rgba(255,255,255,.08); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fa { background: rgba(255,255,255,.08); }
}
.spill .head, .spill .body { background: var(--surface); border-color: var(--border); }
.spill .sign { color: #111; }

/* ---------- Fixed-contrast surfaces ----------
   These are painted with brand colours that are identical in both themes, so
   their text is pinned dark rather than following --ink (which inverts). */
.btn-yellow { color: #111111; }
.badge-verified, .badge-flag { color: #FFFFFF; }
.spill .sign { color: #111111; }
.sticker, .note { color: #111111; }

/* ---------- Programmatic SEO pages ---------- */
.crumbs {
  font-size: 12.5px; color: var(--ink-faint); margin: 22px 0 14px;
  display: flex; gap: 7px; flex-wrap: wrap; align-items: center;
}
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

.seo-head {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  justify-content: space-between;
}
.seo-head-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.seo-head h1 {
  font-size: clamp(21px, 3vw, 30px); margin: 0; letter-spacing: -.03em; line-height: 1.15;
}
.seo-sub { color: var(--ink-faint); font-size: 13.5px; margin: 5px 0 0; }
.seo-score { text-align: center; }
.seo-h2 { font-size: 19px; margin: 0 0 14px; letter-spacing: -.02em; }

.role-icon {
  width: 54px; height: 54px; border-radius: 13px; display: grid;
  place-items: center; font-size: 24px;
  background: var(--lt-yellow); border: 2px solid var(--border);
}

.salary-band {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  justify-content: space-between;
}
.salary-big {
  font-size: 32px; font-weight: 800; letter-spacing: -.035em; line-height: 1;
}
.salary-range {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.salary-bar {
  width: 110px; height: 7px; border-radius: 4px;
  background: linear-gradient(to right, var(--teal), var(--yellow));
}

/* Pros/cons lines on the SEO review cards. */
.pc { font-size: 13px; margin: 0 0 5px; }
.pc-pro { color: var(--green); }
.pc-con { color: var(--red); }

.pill-n {
  font-size: 11px; color: var(--ink-faint); font-weight: 700; margin-left: 3px;
}

@media (max-width: 640px) {
  .seo-head { gap: 14px; }
  .salary-band { gap: 14px; }
}

/* ---------- Admin dashboard ---------- */
.kpis {
  display: grid; gap: 14px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.kpi {
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--r); padding: 18px;
}
.kpi-n { font-size: 30px; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.kpi-l {
  font-size: 12px; color: var(--ink-faint); font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px; margin-top: 6px;
}
.kpi-sub { font-size: 12.5px; color: var(--ink-faint); margin-top: 4px; }

.spark { width: 100%; height: 64px; display: block; overflow: visible; }
.spark-axis {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: var(--ink-faint); margin-top: 6px;
}

.mini-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.queue-row, .rank-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px;
}
.queue-row:last-child, .rank-row:last-child { border-bottom: 0; }
.queue-row:hover { text-decoration: none; }
.queue-row:hover span:first-child { text-decoration: underline; }
.rank-row a:hover { text-decoration: underline; }
.queue-n {
  min-width: 26px; text-align: center; font-weight: 800; font-size: 13px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-faint);
}
.queue-n.hot { background: var(--red); color: #fff; }

@media (max-width: 640px) {
  .kpi { padding: 14px; }
  .kpi-n { font-size: 25px; }
}

/* ---------- First-post empty state ----------
   A launch-day homepage has no content by definition; this is the most
   important screen on the site until someone posts, so it gets real copy
   rather than a shrug. */
.first-post { padding: 44px 26px; max-width: 480px; margin: 0 auto; }
.first-post .ico { font-size: 44px; margin-bottom: 14px; }
/* .empty sets a muted colour on the whole block, so the headline has to
   reassert it or it reads as body text. */
.first-post-h {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 21px; color: var(--ink) !important; margin: 0 0 10px;
  letter-spacing: -.02em; line-height: 1.25;
}
.first-post-p {
  color: var(--ink-soft); font-size: 14.5px; margin: 0 0 22px; line-height: 1.55;
}
.first-post-fine {
  font-size: 12.5px; color: var(--ink-faint); margin: 12px 0 0;
}