/* Ctrl Robotics — Coming soon site, shared styles */
@import url("colors_and_type.css");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ink-1000);
  color: var(--ink-50);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Console-mode tokens (we're always dark on this site) */
body {
  --bg: var(--ink-1000);
  --bg-elevated: var(--ink-900);
  --bg-sunken: var(--ink-950);
  --fg: var(--ink-50);
  --fg-2: var(--ink-300);
  --fg-3: var(--ink-400);
  --fg-4: var(--ink-500);
  --border: var(--ink-800);
  --border-2: var(--ink-700);
}

/* Faint hairline grid, spec-sheet style */
.grid-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 40%, transparent 95%);
}

/* Container */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}

/* ============== NAV ============== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(5 6 8 / 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ink-800);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 64px;
}
.logo {
  font: 900 22px/1 var(--font-display);
  letter-spacing: -0.04em;
  color: var(--ink-0);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
body[data-theme="light"] .logo { color: #050608; }
.logo-stage {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-block;
}
.logo-stage-lg { width: 56px; height: 56px; }
.logo-stage-footer { width: 168px; height: 40px; }
.logo-stage-xl { width: 180px; height: 180px; }
.logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Two logo variants — show the one that matches the current theme.
   Default theme is dark, so show the light-colored (-dark) artwork. */
.logo-img-light { display: none; }
.logo-img-dark  { display: block; }
body[data-theme="light"] .logo-img-light { display: block; }
body[data-theme="light"] .logo-img-dark  { display: none; }
.logo-tracer {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #FFFFFF;
  top: 0;
  left: 0;
  /* Travel around the alpha shape (using stage as 0–100% box).
     Keyframes describe a counter-clockwise loop around the silhouette,
     ending at the position of the orange dot (top-right), then flashing twice. */
  animation: tracer-orbit 3.6s var(--ease-in-out) infinite;
  box-shadow: 0 0 6px rgba(255,255,255,0.6);
}
body[data-theme="light"] .logo-tracer { background: #050608; box-shadow: 0 0 6px rgba(5,6,8,0.4); }
.logo-stage-lg .logo-tracer { width: 10px; height: 10px; box-shadow: 0 0 10px rgba(255,255,255,0.6); }
.logo-stage-xl .logo-tracer { width: 18px; height: 18px; box-shadow: 0 0 16px rgba(255,255,255,0.7); }

.hero-mark {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
}
.hero-wordmark {
  font: 900 96px/0.9 var(--font-display);
  letter-spacing: -0.05em;
  color: var(--ink-0);
}
body[data-theme="light"] .hero-wordmark { color: #050608; }
.hero-wordmark .period { color: var(--orange-500); }

@keyframes tracer-orbit {
  /* Trip around the alpha glyph */
  0%   { top: 18%;  left: 78%; opacity: 1; }   /* near orange dot */
  8%   { top: 8%;   left: 60%; opacity: 1; }   /* up & left along right stroke head */
  16%  { top: 18%;  left: 38%; opacity: 1; }   /* over the top of the curl */
  26%  { top: 36%;  left: 14%; opacity: 1; }   /* down the left side */
  36%  { top: 64%;  left: 14%; opacity: 1; }   /* bottom-left of curl */
  46%  { top: 84%;  left: 36%; opacity: 1; }   /* under the curl */
  54%  { top: 84%;  left: 60%; opacity: 1; }   /* across the bottom */
  62%  { top: 72%;  left: 76%; opacity: 1; }   /* up the right leg foot */
  70%  { top: 50%;  left: 70%; opacity: 1; }   /* mid-right */
  78%  { top: 26%;  left: 78%; opacity: 1; }   /* arrive at orange dot */
  82%  { top: 8%;   left: 78%; opacity: 1; }   /* arrive at orange dot */
  /* Flash twice */
  84%  { top: 8%;   left: 78%; opacity: 0; }
  86%  { top: 8%;   left: 78%; opacity: 1; }
  90%  { top: 8%;   left: 78%; opacity: 0; }
  94%  { top: 8%;   left: 78%; opacity: 1; }
  100% { top: 18%;  left: 78%; opacity: 1; }
}

/* Footer logo row */
.footer-logo-row { display: flex; align-items: center; gap: 14px; }
.footer-wordmark {
  font: 900 36px/1 var(--font-display);
  letter-spacing: -0.04em;
  color: var(--ink-0);
}
body[data-theme="light"] .footer-wordmark { color: #050608; }

.logo-word {
  font: 900 22px/1 var(--font-display);
  letter-spacing: -0.04em;
}
@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; box-shadow: 0 0 0 4px rgb(242 93 23 / 0.18); }
}
.nav-links {
  display: flex;
  gap: 4px;
  flex: 1;
}
.nav-links a {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 4px;
  transition: all var(--dur-2) var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-links a:hover { color: var(--ink-50); background: var(--ink-900); }
.nav-links a.active {
  color: var(--ink-0);
  background: var(--ink-900);
  border: 1px solid var(--ink-800);
}
.nav-links a.active::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--orange-500);
  border-radius: 999px;
}
.nav-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--ink-800);
  border-radius: 4px;
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.nav-status .led {
  width: 6px;
  height: 6px;
  background: var(--orange-500);
  border-radius: 999px;
  animation: pulse 1.6s ease-in-out infinite;
}

/* Theme toggle button */
.theme-toggle {
  margin-left: 8px;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid var(--ink-800);
  background: transparent;
  color: var(--ink-300);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all var(--dur-2) var(--ease-out);
  position: relative;
}
.theme-toggle:hover { color: var(--ink-50); border-color: var(--ink-600); background: var(--ink-900); }
.theme-toggle .theme-icon { display: inline-flex; }
.theme-toggle .light-icon { display: none; }
body[data-theme="light"] .theme-toggle { border-color: #E4E6EA; color: #5A626E; }
body[data-theme="light"] .theme-toggle:hover { color: #050608; background: #F2F3F5; border-color: #A8AEB7; }
body[data-theme="light"] .theme-toggle .dark-icon { display: none; }
body[data-theme="light"] .theme-toggle .light-icon { display: inline-flex; }

/* ============== BUTTONS / INPUTS ============== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 13px/1 var(--font-body);
  padding: 13px 18px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.btn-primary { background: var(--orange-500); color: white; }
.btn-primary:hover { background: var(--orange-600); }
.btn-primary:active { background: var(--orange-700); transform: translateY(1px); }
.btn-ghost {
  background: transparent;
  color: var(--ink-50);
  border: 1px solid var(--ink-700);
}
.btn-ghost:hover { background: var(--ink-900); border-color: var(--ink-600); }

.input, .textarea {
  width: 100%;
  background: var(--ink-950);
  border: 1px solid var(--ink-800);
  border-radius: 4px;
  padding: 14px 16px;
  font: 400 14px/1.4 var(--font-body);
  color: var(--ink-50);
  transition: all var(--dur-2) var(--ease-out);
  outline: none;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-500); }
.input:focus, .textarea:focus {
  border-color: var(--orange-500);
  box-shadow: 0 0 0 2px rgb(242 93 23 / 0.18);
}
.textarea { resize: vertical; min-height: 120px; font-family: var(--font-body); }
.label {
  display: block;
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 10px;
}

/* ============== TYPE HELPERS ============== */
.eyebrow {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-400);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow .bar {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--orange-500);
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ============== HAZARD TAPE ============== */
.hazard {
  height: 16px;
  background: repeating-linear-gradient(
    -45deg,
    var(--ink-1000) 0 12px,
    var(--signal-yellow) 12px 24px
  );
  border-top: 1px solid var(--ink-800);
  border-bottom: 1px solid var(--ink-800);
}
body.hide-hazard .hazard { display: none; }

/* ============== FOOTER ============== */
.footer {
  border-top: 1px solid var(--ink-800);
  padding: 64px 0 32px;
  margin-top: 96px;
  position: relative;
  z-index: 1;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--ink-800);
}
.footer-logo {
  font: 900 56px/0.9 var(--font-display);
  letter-spacing: -0.05em;
  color: var(--ink-50);
}
.footer-tag {
  font: 400 13px/1.6 var(--font-body);
  color: var(--ink-400);
  margin-top: 16px;
  max-width: 280px;
}
.footer-col h4 {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 16px;
}
.footer-col a {
  display: block;
  font: 500 13px/2 var(--font-body);
  color: var(--ink-200);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}
.footer-col a:hover { color: var(--orange-400); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* ============== PAGE HEADERS ============== */
.page-header {
  padding: 96px 0 48px;
  border-bottom: 1px solid var(--ink-800);
}
.page-header h1 {
  font: 700 88px/0.95 var(--font-display);
  letter-spacing: -0.04em;
  color: var(--ink-0);
  margin: 24px 0 0;
}
.page-header .lede {
  font: 400 18px/1.55 var(--font-body);
  color: var(--ink-300);
  margin-top: 24px;
  max-width: 620px;
}

/* Tweak: accent override */
body[data-accent="yellow"] {
  --orange-500: #FFD60A;
  --orange-600: #E5BD00;
  --orange-700: #C9A800;
  --orange-400: #FFE04A;
}
body[data-accent="green"] {
  --orange-500: #2BB673;
  --orange-600: #239A60;
  --orange-700: #0F7A4A;
  --orange-400: #4FCC8E;
}
body[data-accent="blue"] {
  --orange-500: #4D8BFF;
  --orange-600: #2E6FE0;
  --orange-700: #1E54B8;
  --orange-400: #7AA8FF;
}

/* ============== LIGHT THEME (explicit per-selector) ============== */
body[data-theme="light"] {
  background: #F8F9FA;
  color: #050608;
}
body[data-theme="light"] .grid-bg {
  background-image:
    linear-gradient(to right, rgba(5,6,8,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(5,6,8,0.04) 1px, transparent 1px);
}
/* Nav */
body[data-theme="light"] .nav { background: rgb(248 249 250 / 0.85); border-bottom-color: #E4E6EA; }
body[data-theme="light"] .logo { color: #050608; }
body[data-theme="light"] .nav-links a { color: #5A626E; }
body[data-theme="light"] .nav-links a:hover { color: #050608; background: #F2F3F5; }
body[data-theme="light"] .nav-links a.active { color: #050608; background: #FFFFFF; border-color: #E4E6EA; }
body[data-theme="light"] .nav-status { color: #5A626E; border-color: #E4E6EA; }
/* Eyebrow + labels (mono captions stay subdued) */
body[data-theme="light"] .eyebrow { color: #5A626E; }
body[data-theme="light"] .label { color: #5A626E; }
/* Hero — index */
body[data-theme="light"] .mega-mark { color: #050608; }
body[data-theme="light"] .mega-mark .reg { color: #828A95; }
body[data-theme="light"] .tagline { color: #050608; }
body[data-theme="light"] .lede { color: #3A4049; }
/* Notify panel */
body[data-theme="light"] .panel { background: #FFFFFF; border-color: #E4E6EA; box-shadow: 0 1px 2px rgba(5,6,8,0.04); }
body[data-theme="light"] .panel-head { border-bottom-color: #E4E6EA; color: #5A626E; }
body[data-theme="light"] .countdown { border-color: #E4E6EA; }
body[data-theme="light"] .cd-cell { background: #F8F9FA; border-color: #E4E6EA; }
body[data-theme="light"] .cd-num { color: #050608; }
body[data-theme="light"] .cd-label { color: #828A95; }
body[data-theme="light"] .signup-meta { color: #828A95; }
body[data-theme="light"] .robot-frame { background: #FFFFFF; border-color: #E4E6EA; }
body[data-theme="light"] .robot-frame::before { color: #828A95; }
/* Inputs */
body[data-theme="light"] .input,
body[data-theme="light"] .textarea { background: #FFFFFF; border-color: #CACFD5; color: #050608; }
body[data-theme="light"] .input::placeholder,
body[data-theme="light"] .textarea::placeholder { color: #828A95; }
/* Buttons */
body[data-theme="light"] .btn-ghost { color: #050608; border-color: #CACFD5; }
body[data-theme="light"] .btn-ghost:hover { background: #F2F3F5; }
/* Telemetry */
body[data-theme="light"] .telemetry { border-color: #E4E6EA; }
body[data-theme="light"] .tel-cell { border-left-color: #E4E6EA; }
body[data-theme="light"] .tel-num { color: #050608; }
body[data-theme="light"] .tel-num small { color: #5A626E; }
body[data-theme="light"] .tel-label { color: #828A95; }
/* Page header */
body[data-theme="light"] .page-header { border-bottom-color: #E4E6EA; }
body[data-theme="light"] .page-header h1 { color: #050608; }
body[data-theme="light"] .page-header .lede { color: #3A4049; }
/* Jobs */
body[data-theme="light"] .jobs-bar { color: #5A626E; border-color: #E4E6EA; }
body[data-theme="light"] .filter-pill { color: #5A626E; border-color: #E4E6EA; }
body[data-theme="light"] .filter-pill:hover { color: #050608; border-color: #A8AEB7; }
body[data-theme="light"] .filter-pill.active { background: #050608; color: #FFFFFF; border-color: #050608; }
body[data-theme="light"] .job-row { border-bottom-color: #E4E6EA; }
body[data-theme="light"] .job-row:hover { background: #F2F3F5; }
body[data-theme="light"] .job-title { color: #050608; }
body[data-theme="light"] .job-team { color: #828A95; }
body[data-theme="light"] .job-loc { color: #3A4049; }
body[data-theme="light"] .job-tag { color: #3A4049; border-color: #CACFD5; }
body[data-theme="light"] .job-arrow { color: #828A95; }
body[data-theme="light"] .jobs-aside { background: #FFFFFF; border-color: #E4E6EA; }
body[data-theme="light"] .jobs-aside h3 { color: #050608; }
body[data-theme="light"] .jobs-aside p { color: #3A4049; }
/* Contact */
body[data-theme="light"] .channels { border-top-color: #E4E6EA; }
body[data-theme="light"] .channel { border-bottom-color: #E4E6EA; }
body[data-theme="light"] .channel-purpose { color: #828A95; }
body[data-theme="light"] .channel-email { color: #050608; }
body[data-theme="light"] .hq-card { background: #FFFFFF; border-color: #E4E6EA; }
body[data-theme="light"] .hq-card .hq-title { color: #5A626E; }
body[data-theme="light"] .hq-card .hq-addr { color: #3A4049; }
body[data-theme="light"] .hq-card .hq-addr b { color: #050608; }
body[data-theme="light"] .hq-meta { color: #5A626E; border-top-color: #E4E6EA; }
body[data-theme="light"] .hq-meta b { color: #828A95; }
body[data-theme="light"] .form-card { background: #FFFFFF; border-color: #E4E6EA; }
body[data-theme="light"] .form-head,
body[data-theme="light"] .form-foot { background: #F8F9FA; border-color: #E4E6EA; color: #5A626E; }
body[data-theme="light"] .form-foot .meta { color: #828A95; }
body[data-theme="light"] .reasons { border-color: #CACFD5; }
body[data-theme="light"] .reason { background: #F8F9FA; border-right-color: #E4E6EA; color: #5A626E; }
body[data-theme="light"] .reason i { color: #828A95; }
body[data-theme="light"] .reason:hover { background: #FFFFFF; color: #050608; }
body[data-theme="light"] .reason:hover i { color: #3A4049; }
body[data-theme="light"] .success-state h3 { color: #050608; }
body[data-theme="light"] .success-state p { color: #3A4049; }
/* Footer */
body[data-theme="light"] .footer { border-top-color: #E4E6EA; }
body[data-theme="light"] .footer-grid { border-bottom-color: #E4E6EA; }
body[data-theme="light"] .footer-logo { color: #050608; }
body[data-theme="light"] .footer-tag { color: #5A626E; }
body[data-theme="light"] .footer-col h4 { color: #828A95; }
body[data-theme="light"] .footer-col a { color: #3A4049; }
body[data-theme="light"] .footer-bottom { color: #828A95; }

/* =========================================================
   RESPONSIVE — Tablet & Mobile
   ========================================================= */

/* Large tablet / small laptop */
@media (max-width: 1100px) {
  .container { padding: 0 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .page-header h1 { font-size: 64px; }

  /* Hero: keep two-up but tighten right column + gap */
  .hero-grid { grid-template-columns: 1fr 380px !important; gap: 48px !important; }
  .tagline { font-size: 32px !important; }
}

/* Tablet */
@media (max-width: 880px) {
  .nav-inner { gap: 16px; height: 56px; }
  .nav-status { display: none; }
  .nav-links { gap: 0; flex: 1; justify-content: flex-end; }
  .nav-links a { padding: 8px 10px; font-size: 10px; }

  .container { padding: 0 20px; }

  .page-header { padding: 64px 0 32px; }
  .page-header h1 { font-size: 48px; }
  .page-header .lede { font-size: 16px; }

  /* Hero: collapse to single column on tablet; cap panel width */
  .hero { padding: 48px 0 72px; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .hero-grid > div:last-child { max-width: 520px !important; }
  .tagline { font-size: 30px !important; max-width: none !important; }

  /* Signup row: stack at tablet too — flex-row squishes the input below ~700px */
  .signup-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .signup-row .input {
    border-radius: 4px !important;
    border-right: 1px solid var(--ink-800) !important;
  }
  body[data-theme="light"] .signup-row .input {
    border-right-color: #CACFD5 !important;
  }
  .signup-row .btn {
    border-radius: 4px !important;
    width: 100%;
    justify-content: center;
  }
  .signup-meta {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  /* Telemetry: 3 cols on tablet */
  .tel-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .tel-cell:nth-child(4),
  .tel-cell:nth-child(5) {
    border-top: 1px solid var(--ink-800);
    padding-top: 24px;
    margin-top: 24px;
  }
  .tel-cell:nth-child(4) { border-left: 0 !important; padding-left: 0 !important; }
  .tel-num { font-size: 32px !important; }

  /* Jobs list — drop posted-date column */
  .job-row {
    grid-template-columns: 64px 1.4fr 1fr 110px 28px !important;
    gap: 20px !important;
    padding: 22px 8px !important;
  }
  .job-row > div:nth-child(5) { display: none !important; }
  .job-row:hover { padding-left: 16px !important; }
  .job-title { font-size: 19px !important; }

  /* Jobs aside */
  .jobs-aside {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 32px !important;
  }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* Role */
  .role-title { font-size: 40px !important; }

  .footer { margin-top: 64px; padding: 48px 0 24px; }
  .footer-logo { font-size: 40px; }
  .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* Mobile */
@media (max-width: 640px) {
  .container { padding: 0 16px; }

  /* Nav: just logo + theme toggle, links wrap below */
  .nav-inner {
    flex-wrap: wrap;
    height: auto;
    padding: 12px 0;
    gap: 12px;
  }
  .nav-links {
    order: 3;
    width: 100%;
    flex-basis: 100%;
    justify-content: flex-start;
    border-top: 1px solid var(--ink-800);
    padding-top: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body[data-theme="light"] .nav-links { border-top-color: #E4E6EA; }
  .nav-links a { white-space: nowrap; padding: 8px 12px; }
  .theme-toggle { margin-left: auto; }
  .logo-stage { width: 28px; height: 28px; }
  .logo { font-size: 18px; }

  /* Hero */
  .hero { padding: 32px 0 64px; }
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .hero-grid > div:last-child { max-width: none !important; }
  .mega-mark {
    font-size: 120px !important;
    margin-top: 16px !important;
    word-break: break-word;
  }
  .mega-mark .reg {
    position: static !important;
    display: block;
    margin: 8px 0 0 !important;
  }
  .tagline {
    font-size: 26px !important;
    margin-top: 16px !important;
    max-width: none !important;
  }
  .lede { font-size: 15px; max-width: none; }
  .panel-body { padding: 16px !important; }
  .countdown {
    grid-template-columns: repeat(4, 1fr);
  }
  .cd-num { font-size: 28px !important; }
  .cd-cell { padding: 14px 4px !important; }

  /* Signup row: FIX — it's flex, not grid */
  .signup-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .signup-row .input {
    border-radius: 4px !important;
    border-right: 1px solid var(--ink-800) !important;
  }
  body[data-theme="light"] .signup-row .input {
    border-right-color: #CACFD5 !important;
  }
  .signup-row .btn {
    border-radius: 4px !important;
    width: 100%;
    justify-content: center;
  }
  .signup-meta {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  /* Robot frame: narrower aspect on phone */
  .robot-frame { aspect-ratio: 4/3 !important; }

  /* Telemetry strip — FIX: target .tel-grid, not .telemetry */
  .telemetry { margin-top: 64px !important; padding: 0 !important; }
  .tel-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .tel-cell {
    border-left: 0 !important;
    border-top: 1px solid var(--ink-800) !important;
    padding: 20px 16px !important;
    margin-top: 0 !important;
  }
  .tel-cell:nth-child(odd) { border-right: 1px solid var(--ink-800); }
  .tel-cell:nth-child(-n+2) { border-top: 0 !important; }
  .tel-num { font-size: 28px !important; }
  body[data-theme="light"] .tel-cell:nth-child(odd) { border-right-color: #E4E6EA; }

  /* Page headers */
  .page-header { padding: 48px 0 24px; }
  .page-header h1 { font-size: 36px !important; }

  /* Jobs */
  .jobs-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
  }
  .jobs-bar .filters { flex-wrap: wrap; }
  .filter-pill { padding: 6px 10px; font-size: 9px; }
  .job-row {
    grid-template-columns: 40px 1fr 24px !important;
    gap: 12px !important;
    padding: 20px 0 !important;
    align-items: start !important;
  }
  .job-row:hover { padding-left: 8px !important; }
  .job-row .job-loc,
  .job-row .job-tag,
  .job-row > div:nth-child(4),
  .job-row > div:nth-child(5) { display: none !important; }
  .job-title { font-size: 17px !important; }
  .job-arrow { font-size: 16px !important; }

  .jobs-aside {
    grid-template-columns: 1fr !important;
    padding: 24px !important;
    gap: 24px !important;
  }
  .jobs-aside h3 { font-size: 24px !important; }
  .jobs-aside .actions .btn { width: 100%; justify-content: center; }

  /* Contact */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .channel {
    grid-template-columns: 32px 1fr !important;
    gap: 12px !important;
    padding: 18px 0 !important;
  }
  .channel-email { font-size: 17px !important; word-break: break-all; }
  .hq-card { padding: 20px !important; }
  .hq-meta { grid-template-columns: 1fr !important; gap: 8px !important; }

  .form-body { padding: 20px !important; }
  .field-row { grid-template-columns: 1fr !important; gap: 0 !important; }
  .field-row .field { margin-bottom: 16px !important; }
  .reasons {
    grid-template-columns: 1fr 1fr !important;
  }
  .reason { padding: 12px 6px !important; font-size: 11px !important; }
  .form-foot {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .form-foot .btn { justify-content: center; }

  /* Role detail */
  .role-grid { display: block !important; }
  .role-title { font-size: 32px !important; }
  .role-meta {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  .role-meta-cell { min-width: 45%; }
  .role-side { position: static !important; margin-top: 32px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-logo { font-size: 32px; }
}

/* Small mobile */
@media (max-width: 380px) {
  .mega-mark { font-size: 88px !important; }
  .cd-num { font-size: 22px !important; }
  .cd-cell { padding: 12px 2px !important; }
  .tel-num { font-size: 22px !important; }
  .tagline { font-size: 22px !important; }
  .nav-links a { padding: 6px 8px !important; font-size: 9px !important; }
  .logo { font-size: 16px !important; }
  .reasons { grid-template-columns: 1fr !important; }
}