/* HardTech Careers — shared theme layer (Dealroom-inspired clean SaaS look).
 * Loaded after each page's inline <style>: bright blue accent, crisp Inter typography,
 * tight bold headings, soft hairlines, wide container. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{ --accent:#1d6bff; --accent2:#0d9488; }

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:15.5px;
  line-height:1.55;
  color:#0b1220;
  letter-spacing:-.003em;
}

/* clean, tight sans headings (no serif) */
h1, h2, h3{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:700;
  letter-spacing:-.02em;
}
.hero h1, .lead h1{ font-weight:800; letter-spacing:-.03em; }
.brand{ font-weight:800; letter-spacing:-.02em; }
.topnav a.nav{ font-size:14px; }

/* crisp surfaces */
.card,.opp,.post,.panel,.sig,.search,.controls,.rcard,.firm,.flogo,.rlogo{ border-color:#e9edf3; }

/* wider container for every page that still uses .wrap */
.wrap{ max-width:1200px; }

/* ------------------------------------------------------------------ *
 * Global light-theme safety net — guarantees readable contrast.
 * ------------------------------------------------------------------ */
:root{
  --bg:#fff; --panel:#fff; --panel-2:#f6f8fb; --line:#e6eaf0;
  --text:#0f172a; --muted:#64748b;
}
body{ background:#fff !important; color:#0f172a !important; }

/* dark hardcoded surfaces -> light */
.controls{ background:rgba(255,255,255,.92) !important; border-color:#e6eaf0 !important; }
.mldrop,.toast{ background:#fff !important; color:#0f172a !important; border-color:#e6eaf0 !important; }
input[type=search],input[type=text],input[type=email],input[type=url],input[type=tel],
input[type=number],input[type=password],select,textarea{
  background:#f6f8fb !important; color:#0f172a !important; border-color:#e6eaf0 !important;
}
.chip{ background:#f6f8fb !important; color:#0f172a !important; border-color:#e6eaf0 !important; }
.chip.on{ background:#eef4ff !important; color:#1d4ed8 !important; border-color:#cfe0ff !important; }

/* tag pills: light backgrounds; keep generic .t color so inline domain hues show */
.t{ background:#f6f8fb !important; border-color:#e6eaf0 !important; }
.t.t-role{ background:#eef4ff !important; color:#2563eb !important; border-color:#cfe0ff !important; }
.t.t-board{ background:#fff7e6 !important; color:#b7791f !important; border-color:#f0e0b6 !important; }
.t.t-career{ background:#e9fbf4 !important; color:#0d9488 !important; border-color:#bdeede !important; }
.t.t-eco{ background:#f3effe !important; color:#7c3aed !important; border-color:#ddd0fb !important; }
.t.lead{ background:#fdeef6 !important; color:#be185d !important; border-color:#f6c9e0 !important; }
.t.new{ background:#e9fbf4 !important; color:#0d9488 !important; border-color:#bdeede !important; }

/* ------------------------------------------------------------------ *
 * Global alignment & responsiveness — keeps every page centered,
 * evenly guttered, and stable on small screens.
 * ------------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
body{ overflow-x:hidden; }
img,svg,video,iframe{ max-width:100%; height:auto; }

/* the main container is always centered */
.wrap,.shell{ margin-left:auto; margin-right:auto; }

/* never let a flex/grid child force horizontal overflow */
.grid2,.cards,.steps,.statrow,.chips,.topnav,.row{ min-width:0; }

/* tablet / phone: tighter even gutters, fluid headings, no overlap */
@media (max-width:600px){
  .wrap{ padding-left:16px !important; padding-right:16px !important; }
  .shell{ padding-left:16px !important; padding-right:16px !important; gap:18px !important; }
  h1{ font-size:clamp(22px,6.5vw,30px) !important; line-height:1.12 !important; }
  .lead{ padding:22px 18px !important; }
  .statrow .stat-tile{ flex:1 1 calc(50% - 6px); }
  .grid2{ grid-template-columns:1fr !important; }
}